jQuery在Moushover时显示子菜单答案

【问题标题】：jquery display submenu while MoushoverjQuery在Moushover时显示子菜单
【发布时间】：2016-10-17 16:09:13
【问题描述】：

我有一个水平菜单。此子菜单显示在 ul 之外。当我将鼠标悬停在特定类上时，我希望 .sub_menu 出现。当我悬停 .sub_menu 时，我希望它仍然存在。

但是，当我的鼠标从 .sub_menu 移动时，它会消失。

jQuery(document).on('click', '.mobile-sub-menu-controller', function () {
        jQuery(this).siblings('.sub-menu').slideFadeToggle();
        if (jQuery(this).find('i').hasClass('icon-angle-down')) {
            jQuery(this).find('i').removeClass('icon-angle-down');
            jQuery(this).find('i').addClass('icon-angle-up');
        } else {
            jQuery(this).find('i').removeClass('icon-angle-up');
            jQuery(this).find('i').addClass('icon-angle-down');
        }
    });

【问题讨论】：

'mouseover' 在哪里？对我来说似乎是一个点击。 'mouseenter' 无论如何都是你想要的。

标签： javascript php jquery html css

【解决方案1】：

在

jQuery(document).on('click', '.mobile-sub-menu-controller', function () { ..

将点击更改为'mouseenter'，因为'mouseover' 将为光标在目标上移动的每个移动单元触发事件。

【讨论】：

【解决方案2】：

我认为您可以为两个元素（菜单项和子菜单）附加观察器，并决定您应该在两个观察器中使用的类。

但是，您的菜单是否具有如下结构：

<ul>
    <li><i>icon<i> Text
        <ul>
            ...
        </ul>
    </li>
    <li><i>icon<i> Text
        <ul>
            ...
        </ul>
    </li>
    ...
<ul>

您可以使用 css 或 mouseenter/mouseleave 事件来切换菜单项类以显示子菜单。

请注意，如果菜单项和子菜单之间存在间隙，您的 css 或 js 将无法正常工作，因为鼠标会将菜单项留给另一个元素，而不是子菜单。

如果您有其他信息或问题，请告诉我。

您也可以附上您的菜单 html 代码来澄清问题。

【讨论】：