切换（如果存在）嵌套元素

Question

HTML：

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

我想通过'toggler'链接切换'child'UL（如果存在）。可能有多个父＆gt;子元素，所以我只想切换相关的孩子。

提前感谢您的帮助。

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

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

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

});

您是否考虑过使用<button>。

而不是使用链接

Answer 4

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

Answer 5

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