Многоуровневый аккордеон, как навигационное меню

Question

Попытка создания многоуровневого аккордеона, такого как меню навигации, с использованием jquery. Я получил это из сообщения, и я смог это сделать, но проблема в том, что sub-sub-items не отображаются, когда нажимают на него.

FIDDLE

HTML:

<div class="sidebar"> 
    <ul> 
     <li> 
      <a href="javascript:void(0)">Item 1</a> 
      <ul class="sub-menu"> 
       <li> 
        <a href="javascript:void(0)">Sub Item 1</a> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 2</a> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 3</a> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 4</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="javascript:viod(0)">Item 2</a> 
      <ul class="sub-menu"> 
       <li> 
        <a href="javascript:void(0)">Sub Item 1</a> 
        <ul class="sub-sub-menu"> 
         <li> 
          <a href="javascript:void(0)">Sub Sub Item 1</a> 
         </li> 
         <li> 
          <a href="javascript:void(0)">Sub Sub Item 2</a> 
         </li> 
         <li> 
          <a href="javascript:void(0)">Sub Sub Item 3</a> 
         </li> 
         <li> 
          <a href="javascript:void(0)">Sub Sub Item 4</a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 2</a> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 3</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="javascript:viod(0)">Item 3</a> 
     </li> 
     <li> 
      <a href="javascript:viod(0)">Item 4</a> 
     </li> 
     <li> 
      <a href="javascript:viod(0)">Item 5</a> 
     </li> 
    </ul> 
</div> 

JS:

$('.sidebar > ul > li > a').click(function(ev) { 
    $('.sidebar .sub-menu, .sub-menu .sub-sub-menu').stop().slideUp(); 
    $(this).next('.sub-menu').stop().slideToggle(); 
    ev.stopPropagation(); 
}); 

Пожалуйста, помогите мне в получении этой фиксированной.

Answer 1

Ваши селекторы слишком специфичны, аналогичны классам в html.

Не нужно использовать sub-sub-menu, просто сохраните все подменю как sub-menu, независимо от того, насколько они вложены.

Кроме того, ослабьте селектор, не используйте дочерний селектор >.

Обновлено скрипка: http://jsfiddle.net/66kJs/4/ (нажмите Пункт 2, затем подпункт 1)

Обновления: забыла про аккордеон влияет! сделал исправление Обновление: удалено stop() - при взаимодействии во время анимации он оставил бы артефакты предыдущего состояния элементов