Дерево меню jQuery, слайд вверх/вниз

Question

Я пытаюсь создать меню dropdown jQuery, пока он работает нормально. За исключением того, что вы можете открывать только папки/деревья, а не закрывать их снова. Я предполагаю, что мне нужно использовать EQ или Siblings в jQuery? Но, к сожалению, я не знаю, как их собрать - может ли кто-нибудь показать? :)

<ul class="nav"> 
    <li><a href="#">Test link</a></li> 
    <ul class="nav"> 
     <li>Test under</li> 
    </ul> 
</ul> 

jQuery(document).ready(function(){ 
    jQuery('.nav ul').css('display', 'none'); 

    jQuery('.nav li').click(function(){ 
     jQuery(this).find('ul:first').slideDown(); 
    }) 

}) 

// Саймон

Answer 1

Там есть ошибка синтаксиса с разметкой - единственный допустимый прямой потомок <ul> элемента <li>. Если вы хотите, чтобы гнездиться список, сделайте это в <li> себе:

<ul class="nav"> 
    <li> 
     <a href="#">Test link</a> 
     <ul class="nav"> 
      <li>Test under</li> 
     </ul> 
    </li> 
</ul> 

Для переключаясь, мы просто проинструктировать искать элемент родственный <ul> и применить метод .slideToggle() к нему, когда нажата ссылка:

$(function() { 
    // Hide submenus 
    $(".nav ul").hide(); 

    // Toggle nested <ul> (siblings of the link) 
    $(".nav > li > a").click(function(e) { 
     $(this).siblings("ul").slideToggle(); 
     e.preventDefault(); 
    }); 
}); 

Вот демо скрипку: http://jsfiddle.net/teddyrised/2y9fz/ (добавлены дополнительные элементы списка, чтобы продемонстрировать эффект)

Answer 2

Использование slideToggle(); вместо slideDown();, это сделает его, чтобы он выполняет slideDown или slideUp в зависимости от текущей ориентации.

Answer 3

это должно помочь

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

$('.nav ul').each(function() { 
    $(this).on('click', function(e) { 
     e.stopPropagation();//ignore ul clicks 
    }).parent().on('click', function() {//target only parents of a ul 
     if($(this).hasClass('on')) {//if selected 
      $(this).addClass('on').children('ul').slideUp();//slideup 
     } else {//if not selected 
      if($(this).parent('.nav')) {//if start of branch 
       $(this).parent().find('.on').removeClass('on').find('ul').slideUp();//close other branches 
      } 
      $(this).addClass('on').children('ul').slideDown();//slideDown 
     } 
    }); 
}); 

Это рекурсивная, и он нацелен только li, которые имеют ul ребенка. Когда вы выберете другую ветку, она также вернет ранее открытую ветку. Я удалил теги anchor, потому что действие должно было быть на click, а ссылки в примере никуда не денутся. Если он никуда не денется, зачем ему нужна ссылка?

Он также фиксирует форматирование html, чтобы положить ul с внутри li, а не быть братьями и сестрами. т.е.<li><ul><li></li></ul></li> вместо <li></li><ul><li></li></ul>.

сделал скрипку: http://jsfiddle.net/filever10/gmL4x/