jquery - 关闭特定子菜单类的悬停状态

Question

我已经创建了带有子菜单的菜单。子菜单在悬停时显示/隐藏。默认是隐藏。一切正常。如果子菜单元素 li 包含类 current_page_item，jQuery 会在页面加载后立即显示包含此类的子菜单。

但是当我将鼠标悬停在菜单项上时，jQuery 正在关闭和打开带有 current_page_item 类的子菜单，并且它无法正常工作。

我想在页面加载后显示带有 li 元素和 current_page_item 的子菜单时达到这种状态，我可以列出该子菜单中的元素。现在它上下跳动，很难点击某些子菜单项。

这是 fiddle 。第 3 项是有问题的。

https://jsfiddle.net/otrd7vbq/8/

Answer 1

试试这个:

HTML:

<ul class="nav">
  <li>1 item</li>
  <li>2 item</li>
  <li class="hover"> 3 item
    <ul>
      <li>3a item</li>
      <li>3b item</li>
    </ul>
  </li>
  <li class="hover">4 item
    <ul class="display-none">
      <li>4a item</li>
      <li>4b item</li>
    </ul>
  </li>
</ul>

CSS:

.display-none {
  display: none;
}

.display-block {
  display: block !important;
}

JavaScript:

jQuery(document).ready(function(){
    $(".hover").hover(function(){
    if ($(this).children("ul").length > 0) {
        $(this).children("ul").addClass("display-block");
    }
  }, function(){
        $(".display-none").removeClass("display-block");
  });
});

您基本上要做的是:如果 li 标签有子标签，display:block 它们

DEMO