[英]How to use jquery toggle for multiple childs in different parents?
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. 当我单击
parent
类时,我想切换其子类。 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? 是否可以仅使用jquery / javascript? Thank you!
谢谢!
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>
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>
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();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.