jQuery многоуровневое складное вертикальное меню

Question

Я хочу создать многоуровневое меню с помощью jQuery.

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

Я создал скрипку с основным кодом I`ve удалось сделать http://jsfiddle.net/mNW3c/1/

Это имеет проблемы - я немогу получить, чтобы показать/скрыть элементы надлежащего один за другим. Пожалуйста, помогите мне улучшить его.

Заранее благодарен!

Answer 1

Вам нужно указать контекст для оператора show/hide. Прямо сейчас, он просто хватает их всех. В этой части кода

$('.has-child .plus').click(function(){ 
    $('.has-child.hover > ul').toggle('slow'); 
}); 

Вы должны указать, что мы ищем первый мкл родителя этого .plus «s. Вы можете сделать это с этим:

$('.has-child .plus').click(function(){ 
    $('ul:first', this.parentNode).toggle('slow'); 
}); 

Demo