jQuery .toggle (), чтобы показать и скрыть подменю

Я пытаюсь использовать шоу / скрыть в подменю. Это выглядит так:

Родитель 1Родитель 2Ребенок АРебенок БРодитель 3Ребенок СРебенок D

Я хочу показать подменю, только когда нажимаю на его родителя. В настоящее время, когда я нажимаю на любого из родителей, я получаю все подменю.

Вот так:http://jsfiddle.net/saltcod/z7Zgw/

Кроме того, нажатие на ссылку в подменю переключает меню назад.

Ответы на вопрос(2)

Решение Вопроса
//select all the `<li>` element that are children of the `.parent` element
$('.parent').children().click(function(){

    //now find the `.child` elements that are direct children of the clicked `<li>` and toggle it into or out-of-view
    $(this).children('.child').slideToggle('slow');     
});

http://jsfiddle.net/jasper/z7Zgw/1/

В основном код выше используетthis ссылаться на нажатой<li> элемент, чтобы мы могли найти.child элемент, который является дочерним по нажатию<li> элемент.

Этот:$('.child')

Изменился на:$(this).children('.child')

Обновить

Также вы можете остановить распространениеclick событие на вложенном.child элементы как это:

$('.parent').children().click(function(){
    $(this).children('.child').slideToggle('slow');

//select all the `.child` elements and stop the propagation of click events on the elements
}).children('.child').click(function (event) {
    event.stopPropagation();
});

http://jsfiddle.net/jasper/z7Zgw/9/

Docs:

event.stopPropagation(): http://api.jquery.com/event.stopPropagation.children(): http://api.jquery.com/children
 mghhgm11 дек. 2017 г., 22:57
Лучший ответ. Спасибо ❤

Ваш код был:

$('.parent li').click(function(){
    event.preventDefault();
    $('.child').slideToggle('slow');
});

$('.child') выбирает всех "детей". Измените это на$('.child', this), чтобы выбрать только те, которые внутри текущего элемента.

click пузырьки событий, поэтому, чтобы убедиться, что только щелчок самого родителя переключает состояние, вы можете сравнитьevent.target с участиемthis.

Тем не менее, это быстрее:

$('.parent > li > a').click(function(){
    event.preventDefault();
    $(this).parent().find('.child').slideToggle('slow');
});

Видетьиграть на скрипке

РЕДАКТИРОВАТЬ как заметил @Jasper, это короче / быстрее:

$('.parent > li > a').click(function(){
    event.preventDefault();
    $(this).siblings('.child').slideToggle('slow');
});
 saltcod27 февр. 2012 г., 19:27
Большое спасибо, ребята. Я пошел с подходом .siblings (). Коротко, просто и по существу. Кроме того, я подумал, что вероятность того, что я вспомню stopPropagation () в следующий раз, будет довольно слабой =). Большое спасибо.
 ori27 февр. 2012 г., 19:11
Вы правы, конечно. Я дважды менял сценарий (один раз для каждой проблемы, о которой спрашивал ОП), и пропустил это.
 Jasper27 февр. 2012 г., 19:10
.parent().find('.child') также может быть.siblings('.child') или более быстрый селектор будет.next() так как.child элементы появляются сразу послеa элементы.

Ваш ответ на вопрос