如何将巨型菜单的Click事件转换为hover
我找到了一个很好的Mega菜单，需要进行一些修改，以便它可以与ASP.Net webform应用程序一起使用。
除此之外，这个大型菜单适用于Click事件，这可能会使用户在时间上感到困惑，因为通常大多数用户习惯于将鼠标hover在菜单上。
如何更改点击甚至hover，以便当用户将鼠标hover在菜单上时，它会显示，直到用户将鼠标移出菜单，这是下拉列表。 这是一个响应式菜单设计，可能是专门为点击事件设计的。
http://jsfiddle.net/9fmfC/1/
$(function() { cbpHorizontalMenu.init(); }); 实际示例： http ： //tympanus.net/Blueprints/HorizontalDropDownMenu/
注意：请将jsFiddle的`Result1区域的宽度增加到更大屏幕的视图，否则它将调整为小屏幕视图
这个脚本完全有效:)
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 }; })();
那么它需要你修改菜单的javascript源 。
所以看起来应该是这样的。
和美化和改变后的代码
var cbpHorizontalMenu = (function () { var b = $("#cbp-hrmenu > ul > li"), g = b.children("a"), c = $("body"), d = -1; function f() { g.on("mouseover", a); b.on("mouseover", function (h) { h.stopPropagation() }) } function a(j) { if (d !== -1) { b.eq(d).removeClass("cbp-hropen") } var i = $(j.currentTarget).parent("li"), h = i.index(); if (d === h) { i.removeClass("cbp-hropen"); d = -1 } else { i.addClass("cbp-hropen"); d = h; c.off("click").on("click", e) } return false } function e(h) { b.eq(d).removeClass("cbp-hropen"); d = -1 } return { init: f } })(); $(function () { cbpHorizontalMenu.init(); });
在jsfiddle
var cbpHorizontalMenu = (function () { var b = jQuery("#cbp-hrmenu > ul > li"), g = b.children("a"), c = $("body"), d = -1; function f() { g.on("mouseenter", a); b.on("mouseenter", function (h) { h.stopPropagation(); }); } function a(j) { if (d !== -1) { b.eq(d).removeClass("cbp-hropen"); } var i = jQuery(j.currentTarget).parent("li"), h = i.index(); if (d == h) { i.addClass("cbp-hropen"); d = h; //alert(h); } else if (d === h) { i.removeClass("cbp-hropen"); d = -1 } else { i.addClass("cbp-hropen"); d = h; c.off("mouseenter").on("mouseenter", e) } return false } function e(h) { b.eq(d).removeClass("cbp-hropen"); d = -1 } return { init: f }
}）（）;
只需要修改一个function
function f() { g.on("mouseover", a); b.on("mouseover", function (h) { h.stopPropagation() }); }
将“click”替换为“mouseover”