Question

我有2个div包含“clickable div”和其他“nav_menu”这是菜单。我的问题是“#clickable_div”实现了一个mouseleave函数当我将鼠标悬停在菜单上时，它不应该是当前正在发生的slideUp 我该如何解决这个问题？

注意：我正在使用一个小插件进行下拉

JSFiddle - ＆gt; http://jsfiddle.net/HtNK3/13/

代码

$(document).ready(function() {
    var visible = false;

    $('#clickable_div').click(function() {
      visible = true;
      $('#nav_menu').showMenu({
            parent:'#clickable_div'
      });                
    }).mouseleave(function() {

    if(visible) {
        visible = false;
        window.setTimeout(function(){$('#nav_menu').hide('blind');}, 1000);
    }
    });       //end mouseleave     

    $('#l1').click(function() {
    alert("...");               
    });  
});

Answer 1

我的问题是，当我将鼠标悬停在菜单上时，它不应该是当前正在发生的slideUp我该如何解决这个问题？

然后不要隐藏mouseleave上的框。删除所有这些：

.mouseleave(function() {

    if(visible) {
        visible = false;
        window.setTimeout(function(){$('#nav_menu').hide('blind');}, 1000);
    }
 })

编辑：

我能想到的最简单的方法是将整个事物包装在另一个块元素中并将mouseleave事件绑定到该元素。我已经更新你的小提琴以显示解决方案。

http://jsfiddle.net/HtNK3/20/

Answer 2

以下代码导致问题，

     .mouseleave(function() {
        if(visible) {
            visible = false;
            window.setTimeout(function(){$('#nav_menu').hide('blind');}, 1000);
        });

您要做的是当鼠标离开您要求隐藏菜单的菜单标题时。

尝试在菜单标题和菜单上检测鼠标。 Check this answer关于如何做到这一点

Js Code

有许多plugins可用于执行此操作，并将其中的任何一个更改为与您的网站相匹配

自定义下拉菜单mouseleave问题

代码

2 个答案: