菜单 mouseenter mouseleave click [英] menu mouseenter mouseleave click
问题描述
谁能帮帮我?我想要一个在 mouseenter 和 mouseleave 事件上带有动画的下拉菜单,但是在鼠标进入后单击时,我希望子菜单保持可见,直到在页面中的任意位置进行新的单击(在示例中仅在正文中).在第二次点击(mouseleave 的相同动画)之后,我希望 mouseenter 和 mouseleave .on 再次像我们开始时一样.
Anyone can help me? I want a dropdown menu with animation on mouseenter and mouseleave events but when clicked after mouse enter I want the submenu stay visible until new click anywhere in page (in the example is only in the body). After that second click (same animation of mouseleave) I want mouseenter and mouseleave .on again like when we started.
$('#menu > li').on('mouseenter',function(){
//mouseenter handler
});
$('#menu > li').on('mouseleave',function(){
//mouseleave handler
});
$('#menu > li').toggle(
function () {
$('#menu > li').off('mouseenter mouseleave');
},
function () {
//mouseleave handler
});
$('body').click(function(){
//same mouseleave handler
});
我不知道如何在第二次点击后启用 mouseenter/mouseleave.对不起,谢谢.
I don't know how i can enable mouseenter/mouseleave after second click. Sorry, and thanks.
推荐答案
使用事件委托可以显着简化:
This could be significantly simplified using event delegation:
$('document').on("click",'#menu > li', function() {
$('#menu > li').off('mouseenter mouseleave');
});
$('document').on("click",':not(#menu > li)', function() {
$('#menu > li').on('mouseenter', function(){
//your mouseenter handler goes here
});
$('#menu > li').on('mouseleave', function(){
//your mouseleave handler goes here
});
});
这在语义上等同于:
If a click happens on a menu item, unbind mouse enter/leave events
If a click happens on a non menu item, bind mouse enter/leave events
这篇关于菜单 mouseenter mouseleave click的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!