如何将巨型菜单的Click事件转换为悬停 [英] How to convert Click event of mega menu to hover

问题描述

我找到了一个很好的Mega菜单，需要进行一些修改，以便它可以与ASP.Net webform应用程序一起使用。

I found a nice Mega menu which need some modification so that it can be used with ASP.Net webform application.

除了这个超级菜单适用于Click因为通常大多数用户习惯将悬停效果悬停在菜单上，所以可能会使用户感到困惑。

Besides that this mega menu works on the Click event which may confuse user at time as usually most of the user are used to hover effect over the menus.

如何更改点击甚至悬停以便用户将鼠标悬停在显示的菜单上，直到用户将鼠标从菜单中移出为止。这是一个响应式菜单设计&可能是故意为点击事件设计的。

How can i change click even to hover so that that when user hover over the menu it show up till user moves mouse out of the menu are of dropdown. This is a responsive menu design & may have been designed intentionally for click event.

http： //jsfiddle.net/9fmfC/1/

    $(function() {
        cbpHorizontalMenu.init();
    });

实际示例： http://tympanus.net/Blueprints/Horizo​​ntalDropDownMenu/

注意：请增加jsFiddle的`Result1区域的宽度到更大屏幕的视图，否则它将调整为小屏幕视图

Note: Please increase the width of the `Result1 area of jsFiddle to the view of larger screen otherwise it will adjust to small screen view

推荐答案

此脚本完全有效：）

var cbpHorizontalMenu = (function() {

var $listItems = $( '#cbp-hrmenu > ul > li' ),
    $menuItems = $listItems.children( 'a' ),
    $body = $( 'body' ),
    current = -1;

function init() {
    $menuItems.on( 'mouseover', open );
    $listItems.on( 'mouseover', function( event ) { event.stopPropagation();} );
            $listItems.on( 'mouseleave', close );
}

function open( event ) {

    if( current !== -1 ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' );
    }

    var $item = $( event.currentTarget ).parent( 'li' ),
        idx = $item.index();

    if( current === idx ) {
        $item.removeClass( 'cbp-hropen' );
        current = -1;
    }
    else {
        $item.addClass( 'cbp-hropen' );
        current = idx;
    }

    return false;

}

function close( event ) {
    $listItems.eq( current ).removeClass( 'cbp-hropen' );
    current = -1;
}

return { init : init };

})();

这篇关于如何将巨型菜单的Click事件转换为悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！