Question

我有一个水平菜单。该子菜单显示在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');
        }
    });

Answer 1

在

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

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

Answer 2

我认为你可以为两个元素（菜单项和子菜单）添加观察者，并决定你应该在两个观察者中使用的课程。

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

foreach($value->result as $val){}
    if($val->somethinghappenedtrue){
        $arr[] = array('data' => $thethingthathappened);
    }
}
// since my session is autoloaded I don't need to initialize
//session if I'm not wrong $this->load->session etc...
$this->session->new_session_name($arr);

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

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

如果您有其他信息或问题，请与我们联系。

此外，您可以附上菜单HTML代码以澄清问题。

当Moushover时，jquery显示子菜单

2 个答案: