Сделать вложенное меню аккордеона Jquery закрытым при нажатии новой вкладки.

Question

Я настроен на простой аккордеон для моего навигатора на мобильных устройствах. HTML имеет структуру, как это:

<nav> 
    <ul id="topMenu"> 
    <li> 
     <ul> 
      <li><h3><a href="#">Work</a></h3></li> 
      <li><a href="/work/">Brand ID</a></li> 
      <li><a href="/work/">Print</a></li> 
      <li><a href="/work/">Book & Editorial</a></li> 
      <li><a href="/work/">Web</a></li> 
      <li><a href="/work/">Packaging</a></li> 
      <li><a href="/work/">Exhibit</a></li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li><h3><a href="#">About</a></h3></li> 
      <li><a href="/about/">Our Story</a></li> 
      <li><a href="/about/">Methodology</a></li> 
      <li><a href="/about/">Team</a></li> 
      <li><a href="/about/">Studio</a></li> 
      <li><a href="/about/">Services</a></li> 
      <li><a href="/about/">Partners</a></li> 
     </ul> 
    </li> 
</ul> 
</nav> 

Когда размер экрана достигает подвижен, у меня есть целый новый набор CSS (с использованием медиа запросов) для того чтобы достигнуть экран так же, как это:

Первичные дисплеи, а остальные скрыты. Я использую jquery для создания гармонического стиля, как показано ниже:

$("nav #topMenu li ul").toggle(function(){ 
    $(this).children("li").stop().slideDown(); 
}, function(){ 
    $(this).children("li:nth-child(1n+2)").stop().slideUp(); 
}); 

Это прекрасно работает; однако я ищу поведение, когда открывается одна панель, остальные закрываются. Итак, в любой момент времени на аккордеоне будет открыта только одна панель. Это обычное поведение для аккордеонов.

Вы можете помочь с jquery, чтобы сползать все открытые панели, когда пользователь нажимает на любой из элементов списка родительского уровня? Благодаря!

Answer 1

Вот быстрый обходной http://jsfiddle.net/sethunath/wayfP/ Здесь я запуская щелчок следующей ул, если она видна