当我尝试将鼠标悬停在第二个子项目上时，它的关闭 - Jquery 或 css 问题？

Question

您好，我有一个带有子菜单的菜单。我的目标是当用户悬停在每个主菜单上并且如果有子菜单它会显示我有圆顶它，现在的问题是当你尝试悬停或 select 第二个子项目时它将 jquery隐藏将启动，请隐藏整个子项目。

这是js脚本

    jQuery(document).ready(function(){

    //Main-header-menu desktop
    var subMenu = jQuery('.sub-menu');
    var menuItem = jQuery('.menu-item');
    // hover effect to show sub items
    menuItem.on({mouseenter:function(){
        jQuery(this).find(subMenu).show()
    },mouseleave:function(){
        subMenu.hide(500);
    }
        })
})

这里是css

 ul#main-menu{
        padding:0;
        margin:10px 0 0 0;
}

ul#main-menu li{
    list-style: none;
    margin:0 0 0 5px;
}

ul#main-menu > li{
    float: left;
}

ul#main-menu li a{
    text-decoration:none;
    color:#000000;
    font-family: 'Fjalla One', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    border-right:1px solid #e5f2ff;
    padding: 0 0 0 5px;
}
ul#main-menu li.menu-item-14{
    border:none;
}
ul#main-menu li.menu-item-14 a {
    font-size: 25px;
}
ul#main-menu li.menu-item ul.sub-menu{
    display: none;
}

和 html:

    <ul id="main-menu" class="menu"><li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="http://localhost/newstt/">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://#">Hotels</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="http://#">Flights</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9"><a href="http://#">Holiday Packages</a>
<ul class="sub-menu">
    <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="http://#">Flights + Hotels (Depart from UAE)</a></li>
    <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="http://#">Hotels + Tours &#038; Excursions</a></li>
</ul>
</li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="http://#">Tours &#038; Attractions</a>
<ul class="sub-menu">
    <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://localhost/newstt/sample-page/">Sample Page</a></li>
</ul>
</li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://#">Car Rental</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="http://#">Visas</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://#">Travel Extras</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="http://#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
</ul>

这是代码笔示例link

Answer 1

我想这是因为 mouseleave 是由你离开的项目触发的，然后进入另一个项目，所以所有的菜单都关闭了，一旦出现的菜单打开。

我在 phone 上，无法确定，所以这只是一个假设，希望对您有所帮助。 =/

Answer 2

子菜单项 (li) 有 "menu-item" class。它会导致问题，因为相同的 class 用于一级菜单。例如，将子菜单项的 class 替换为 "menu-subitem"，它将运行良好。

例如：

<ul class="sub-menu">
        <li id="menu-item-15" class="menu-subitem ..."><a href="#">Flights +Hotels (Depart from UAE)</a></li>
</ul>

当我尝试将鼠标悬停在第二个子项目上时，它的关闭 - Jquery 或 css 问题？

When i try to hover on the second sub-item its closing - Jquery or css issue?

javascript

css

jquery

jquery-hover