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

Question

HTML：

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

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

在此先感谢您的帮助。

Answer 1

的UL是不是一个孩子了锚，但使用next()很简单：

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

Answer 2

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

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

}); 

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

Answer 3

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

Answer 4

鉴于你的链接有一个ID：

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

jQuery的是：

$('ul.parent li a') 

：

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

您可以通过元素和类而不是ID直接选择

但是ID选择器通常被认为是以更快速度

如果您希望设置动画效果，则toggle功能也接受参数。

$(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 5

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