用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 s。