Question

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

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

我希望在显示页面加载后带current_page_item元素和li的子菜单时显示状态，并且我可以列出此子菜单中的项目。现在它上下跳跃，很难点击一些子菜单项。

这是小提琴。第3项是有问题的。

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

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

1 个答案: