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

Question

HTML：

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

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

在此先感谢您的帮助。

Answer 1

UL 不是 anchor 的子节点，但使用起来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 选择器通常被认为更快

如果您希望设置动画，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 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();
});