如何在不同父母中为多个孩子使用jquery切换？

Basically i have a few parents that have the same 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>

And when i click on a parent class i want to toggle its child. For that i'm using:

当我点击父类时,我想切换它的孩子。为此我正在使用:

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

This does toggle my child but if i leave it visible and i click on the next parent i want to make all other children disappear.

这确实切换了我的孩子,但如果我让它可见,我点击下一个父母我想让所有其他孩子消失。

Is this possible using only jquery/javascript? Thank you!

这可能只使用jquery / javascript吗?谢谢!

3 个解决方案

#1

You could use a class to manage display and just toggle that class on current parent and remove it from others

您可以使用类来管理显示,只需在当前父级上切换该类,并将其从其他父级中删除

$('.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>

#2

I think you need to show only one of childs. To do this work first hide all childs then show clicked child.

我想你只需要展示一个孩子。要完成这项工作,首先要隐藏所有孩子,然后显示点击的孩子。

$('.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>

#3

Please Try This:-

请试试这个: -

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

#1