使用jquery显示第三级ul菜单

show third level ul menu with jquery

本文关键字:ul 菜单 第三级 显示 jquery 使用      更新时间:2023-09-26

我在使用jQuery创建下拉菜单时遇到了一些问题。

这段代码显示了悬停时的子菜单,但是我不能让子菜单也工作

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

JS代码

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

丢掉sub-sub类,使用直系后代选择器来帮助你:

<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