javascript - 如何对不同 parent 的多个 child 使用 jquery 切换？

Question

基本上我有几个 parent 上同一个类(class):

<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();
    });
});  

这确实会切换我的 child ，但如果我让它可见并单击下一个父项，我想让所有其他子项消失。

仅使用 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>