jquery下滑列表導航

Question

我似乎無法得到這個工作，但我不明白爲什麼。有人可以快速查看並告訴我我做錯了什麼嗎？

目標：當我點擊「sidebar-navigation> li」時，我希望我的「側邊欄內部列表」向下滑動，我希望能夠關閉所有打開的列表，當我推入一個封閉的列表時。我還需要能夠關閉我點擊它時再次單擊它。

HTML

<ul class="sidebar-navigation"> 
      <li> 
       Overskrift 
       <ul class="sidebar-inner-list"> 
        <li> 
         <a href="#">Link</a> 
        </li> 
        <li> 
         <a href="#">Link</a> 
        </li> 
       </ul> 
      </li> 

      <li> 
       Overskrift 2 
       <ul class="sidebar-inner-list"> 
        <li> 
         <a href="#">Link 2</a> 
        </li> 
        <li> 
         <a href="#">Link 2</a> 
        </li> 
        <li> 
         <a href="#">Link 2</a> 
        </li> 
       </ul> 
      </li> 

     </ul> 

JQUERY

var allPanels = $('.sidebar-inner-list > li').hide(); 

$('.sidebar-navigation > li').click(function() { 
    allPanels.slideUp(); 
    $(this).children('.sidebar-inner-list').slideDown(); 
    return false; 
}); 

希望有人能找到這個錯誤。

我還做了一個小提琴：http://jsfiddle.net/iBertel/nrFhu/6/

Answer 1

你需要了slideDown隱藏相同的元素。

http://jsfiddle.net/isherwood/nrFhu/7/

$(this).find('.sidebar-inner-list').slideDown(); 

應該

$(this).find('.sidebar-inner-list li').slideDown(); 

爲了解決上下的問題，你可能需要增加一個邏輯層：

http://jsfiddle.net/isherwood/nrFhu/8/

$('.sidebar-navigation > li').each(function() { 
    $(this).click(function() { 
     $('.sidebar-navigation > li').not(this).find('li').slideUp(); 
     $(this).find('.sidebar-inner-list li').slideDown(); 
     return false; 
    }); 
}); 

Answer 2

試試這個

$(document).ready(function(){ 
    $('.sidebar-inner-list').children("li").slideUp(0); 
    $('.sidebar-navigation li').click(function() { 
     $('.sidebar-inner-list').children("li").slideUp(); 
     $(this).children(".sidebar-inner-list").children("li").slideDown(); 
    }); 
});