jQuery style accordion не распространяется на все неупорядоченные списки

Question

У меня есть меню, и я хочу создать меню стиля аккордеона, используя jQuery. Проблема, с которой я сталкиваюсь, связана с jQuery.

Когда я нажимаю на любой из первых <li>, таких как первое меню, он расширяет только следующий <ul>, а не вложенный список внутри.

Как я могу изменить свой jQuery, чтобы он расширил все <ul> внутри родителя <li>?

<ul id="nav"> 
    <li><a href="#">First Menu...</a> 
    <ul> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum/a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li><a href="#">Second Menu...</a> 
    <ul> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum/a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li><a href="#">Third Menu...</a> 
    <ul> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
     <li>Lorem Ipsum 
     <ul> 
      <li><a href="#">Lorem Ipsum/a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

JQuery

$(document).ready(function(){ 
    $("#nav > li > a").on("click", function(e) { 
     if($(this).parent().has("ul")) { 
      e.preventDefault(); 
     } 

     if(!$(this).hasClass("open")) { 
      // hide any open menus and remove all other classes 
      $("#nav li ul").slideUp(350); 
      $("#nav li a").removeClass("open"); 

      // open our new menu and add the open class 
      $(this).next("ul").slideDown(350); 
      $(this).addClass("open"); 
     } 

     else if($(this).hasClass("open")) { 
      $(this).removeClass("open"); 
      $(this).next("ul").slideUp(350); 
     } 
    }); 
}); 

Answer 1

Я хотел бы предложить вам использовать по умолчанию Accordin с помощью JQuery UI

http://jqueryui.com/accordion/