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

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

1 голос
/ 27 февраля 2012

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

  1. Родитель 1
  2. Родитель 2
    1. Ребенок A
    2. Ребенок B
  3. Родитель 3
    1. Ребенок C
    2. Ребенок D

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

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

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

Ответы [ 2 ]

4 голосов
/ 27 февраля 2012 
//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/

Документы:

2 голосов
/ 27 февраля 2012

Ваш код был: 

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

См. скрипка

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

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