<ul>
<li>
<div class="single-toggle">|Toggle|</div>
<div class="visible-when-folded">
<div class="name">Peter</div>
<div class="date">3 january 1984</div>
</div>
<div class="invisible-when-folded">
<div class="about">Funny guy</div>
<div class="contact_info">0879876745</div>
</div>
</li>
<li>
<div class="single-toggle">|Toggle|</div>
<div class="visible-when-folded">
<div class="name">David</div>
<div class="date">17 April 1988</div>
</div>
<div class="invisible-when-folded">
<div class="about">Jackass</div>
<div class="contact_info">0979876345</div>
</div>
</li>
</ul>
期望的结果
当我点击|Toggle|
元素时,只有div.invisible-when-folded
内的元素会在相应的li
元素中消失。
我尝试了什么
点击this code中的|Toggle|
,同时切换两个li
元素中不可见/可见的div。如何让它仅切换我点击的切换的li
?
答案 0 :(得分:3)
选择该类的被点击元素的所有(以下)兄弟:
$(this).nextAll('.invisible-when-folded').toggle();
看一下jQuery的traversal methods.
答案 1 :(得分:2)
怎么样:
$(".single-toggle").click(function(){
$(this).closest('li').find('.invisible-when-folded').toggle();
});