показать меню уровня третьего уровня с jquery

Question

У меня возникли проблемы с созданием выпадающего меню с jQuery.

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

$(document).ready(function() { 
    $("li").has(".sub").hover(function() { 
    $(this).find(".sub").toggle(); 
    }); 
}); 

Вот код JS

http://codepen.io/anon/pen/rVmabP

Answer 1

Потерять sub-sub класс и используйте селектор непосредственных потомков, чтобы помочь вам:

HTML

<ul id="nav"> 
    <li>11111 
    <ul class="sub"> 
     <li>2</li> 
    </ul> 
    </li> 
    <li>11111 
    <ul class="sub"> 
     <li>2</li> 
     <li>22222 
     <ul class="sub"> 
      <li>3</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

JavaScript

$(document).ready(function() { 
    $("li").has("> .sub").hover(function() { 
    $(this).find("> .sub").stop().slideToggle(); 
    }); 
}); 

JSFiddle

Обратите внимание, что это будет работать на неограниченное количество вложенных .sub с.