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

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(); 
});