Переключить (если существует) вложенный элемент

Question

HTML:

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

Я бы хотел переключить «дочерний» UL (если он существует) через ссылку «переключатель». Могут быть несколько родительских> дочерних элементов, поэтому я хочу переключить только соответствующий дочерний элемент.

Заранее спасибо за помощь.

Answer 1

UL не является дочерним для привязки, но использование next() достаточно просто:

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

Answer 2

Учитывая, что ваша ссылка имеет идентификатор:

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

JQuery будет:

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

Вы можете выбрать непосредственно по элементу и классу вместо ID:

$('ul.parent li a')

Но селекторы идентификаторов обычно считаются более быстрыми

Функция переключения также принимает параметр, если вы хотите анимировать, например,

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

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

Answer 4

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

Answer 5

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

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

});

Рассматривали ли вы вместо использования ссылки там: <button>.