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

Question

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

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

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

这是小提琴。第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