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|、両方の要素から同時に非表示/表示のdivが切り替わります。クリックしたトグルだけをトグルさせるにはどうすればよいですか？lili

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 に答える