如何對不同父母中的多個孩子使用jQuery切換？

Question

基本上我有幾個同班的父母：

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>

當我單擊parent類時，我想切換其子類。 為此，我正在使用：

$(document).ready(function(){
    $('.parent').click(function(e){
        $(this).children('.child').toggle();
    });
});  

這確實可以切換我的孩子，但是如果我保持可見狀態，然后單擊下一個父母，我想讓所有其他孩子消失。

是否可以僅使用jquery / javascript？ 謝謝！

Answer 1

您可以使用一個班級來管理顯示，只需在當前父級上切換該班級並將其從其他班級中刪除

 $('.parent').click(function(){ $('.active').not(this).removeClass('active'); $(this).toggleClass('active'); }) 

 .parent{ margin-bottom:2em} .child{display:none} .active .child{ display:block} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent">Parent 1 <div class="child">Child</div> </div> <div class="parent">Parent 2 <div class="child">Child</div> </div> <div class="parent">Parent 3 <div class="child">Child</div> </div> 

Answer 2

我認為您只需要顯示一個孩子即可。 為此，請先隱藏所有孩子，然后顯示被點擊的孩子。

$('.parent').click(function(e){
  $(this).siblings().children('.child:visible').toggle();  
  $(this).children('.child').toggle();     
}).children(".child").toggle();

 $('.parent').click(function(e){ $(this).siblings().children('.child:visible').slideUp(); $(this).children('.child').slideDown(); }).children(".child").slideUp(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent">parent1 <div class="child">child1</div> </div> <div class="parent">parent2 <div class="child">child2</div> </div> <div class="parent">parent3 <div class="child">child3</div> </div> 

Answer 3

請嘗試：

$('.parent').click(function(e){
            if($(this).children('.child').is(':visible')){
                $(this).children('.child').slideUp();
            }else{
                $('.parent .child').slideUp();
                $(this).children('.child').slideDown(); 
            }           
        });