用jquery显示第三级ul菜单

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。