jQuery菜单-如何添加鼠标事件
jQuery menu - How to add mouse events?
我的目标是这样-一个简单的鼠标悬停在我的菜单上，当鼠标在子菜单时保持active，并在鼠标离开主选项卡或子菜单时触发close()功能。
我知道我需要一个事件处理程序来触发close()，但我真的很感激我能得到的任何输入。
当前，jquery将父类'cbp-hrclosed'重写为'cpb-hropen'
下面是我想要实现的一个例子:http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/
jQuery
var cbpHorizontalMenu = (function() {
var hover = 1;
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation();
hover=1;
} );
}
function open( event ) {
if( current !== -1) {
$listItems.eq( current ).removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
}
var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
$item.removeClass('cbp-hrclosed').addClass('cbp-hropen');
current = idx;
$body.off( 'click' ).on( 'click', close );
$body.on( 'click', close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
current = -1;
}
return { init : init };
})();