0
<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

我试过的

|Toggle|此代码中单击会同时切换两个li元素的 div 不可见/可见。我如何让它只li切换我点击的切换?

4

2 回答 2

3

选择具有该类的单击元素的所有(以下)兄弟姐妹:

$(this).nextAll('.invisible-when-folded').toggle();

演示

看看 jQuery 的遍历方法。

于 2013-01-08T19:41:54.523 回答
2

怎么样:

$(".single-toggle").click(function(){ 
  $(this).closest('li').find('.invisible-when-folded').toggle(); 
});
于 2013-01-08T19:42:03.587 回答