Аккордеон как меню - подменю не скрывается при нажатии на другую ссылку - jQuery

Question

У меня есть меню, созданное с помощью ul li, и я пытаюсь скрыть другие подменю, когда на якоре запускается событие click. меню HTML выглядит следующим образом

<ul id="navigation"> 
     <li> 
      <a href="javascript:void(0)">link 1</a> 
      <ul class="subnavi"> 
       <li><a href="#">sublink 1</a></li> 
       <li><a href="#">sublink 2</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="javascript:void(0)">link 2</a> 
      <ul class="subnavi"> 
       <li><a href="#">sublink 3</a></li> 
       <li><a href="#">sublink 4</a></li> 
      </ul> 
     </li> 
     <li class="active"> 
      <a href="javascript:void(0)">link 3</a> 
      <ul class="subnavi"> 
       <li><a href="#">sublink 5</a></li> 
       <li><a href="#">sublink 6</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">link 4</a> 
     </li> 
    </ul> 

CSS код выглядит следующим образом

#navigation li ul{ display: none;} 

А.Н. Jquery часть выглядит следующим образом

$('#navigation > li:has(ul) > a').on("click",function(ev) { 
     $(this).siblings('ul').toggle().end().siblings().find('ul').hide(); 
     ev.preventDefault(); 
    }); 

Что я делаю не так?

Answer 1

Используйте followig JQuery код:

$('#navigation > li:has(ul) > a').on("click",function(ev) { 
     $('#navigation .subnavi').hide(); //This hides all the sub menus 
     $(this).siblings('ul').toggle().end().siblings().find('ul').hide(); 
     ev.preventDefault(); 
    }); 

Вот демо: http://jsfiddle.net/82jJv/

Answer 2

Во-первых, скрыть все подменю:

$('.subnavi').hide(); 

, а затем сделать видимым текущее фактическое подменю