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

【问题标题】：Toggle (if exists) nested element切换（如果存在）嵌套元素
【发布时间】：2010-01-19 11:14:45
【问题描述】：

HTML：

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

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

提前感谢您的帮助。

【问题讨论】：

【解决方案1】：

UL 不是 anchor 的子节点，但使用 next() 很简单：

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

【讨论】：

【解决方案2】：

鉴于您的链接有一个 id：

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

jQuery 将是：

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

您可以直接按元素和类而不是 ID 进行选择：

$('ul.parent li a')

但 ID 选择器通常被认为更快

toggle 函数也接受一个参数，如果你想动画，例如

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

它的一个变体是 slideToggle，具有相同的参数。

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

【讨论】：

【解决方案3】：

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

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

});

您是否考虑过使用<button> 来代替那里的链接。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：