谁能帮帮我?我想要一个在 mouseenter 和 mouseleave 事件上带有动画的下拉菜单,但是在鼠标输入后单击时,我希望子菜单保持可见,直到在页面中的任意位置进行新的单击(在示例中仅在正文中)。第二次单击后(与 mouseleave 相同的动画),我希望 mouseenter 和 mouseleave .on 再次像我们开始时一样。
$('#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。抱歉,谢谢。
最佳答案
这可以使用事件委托(delegate)显着简化:
$('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
关于javascript - 菜单 mouseenter mouseleave click,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13585867/