jquery - ネストされた要素を切り替えます（存在する場合）

Question

HTML：

<ul class="parent">
   <li><a href="#">toggler</a>
       <ul class="child">
       ...
       </ul>
   </li>
</ul>

'toggler'リンクを介して'子'UL（存在する場合）を切り替えたいのですが。複数の親>子要素がある可能性があるため、関連する子のみを切り替えたいと思います。

よろしくお願いします。

Answer 1

ULはアンカーの子ではありませんが、使用next()は非常に簡単です。

$('ul a').click(function() {
     $(this).next().toggle();
});

Answer 2

リンクにIDがある場合：

<a id="Mylink" href="#">

jQueryは次のようになります。

$("#MyLink").click(function(){
    $(this).siblings('.child').toggle();
});

IDの代わりに要素とクラスで直接選択できます。

$('ul.parent li a')

ただし、IDセレクターは一般的に高速であると見なされます

アニメーション化する場合、トグル関数はパラメータも受け入れます。

    $(this).siblings('.child').toggle('slow');  /or 'medium', or 'fast'
    $(this).siblings('.child').toggle(100); //100 millisecs

これのバリエーションは、同じパラメーターを持つslideToggleです。

    $(this).siblings('.child').slideToggle('slow');

http://docs.jquery.com/Effects/toggle

Answer 3

$('.parent a').click(function () {
  $('.child', this.parentNode).toggle();
});

Answer 4

$('ul.parent li a').click(function(event) {

    $(this).next('ul.child').slideToggle(500);
    event.preventDefault();

});

そこでリンクを使用する代わりに、を検討しましたか<button>。

Answer 5

$("a.toggler").click(function(){
   $(this).parent().children('.child').toggle();
});