0

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

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

JSFiddle - > 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("...");               
    });  
});
4

2 回答 2

2

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

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

.mouseleave(function() {

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

编辑：

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

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

于 2012-04-06T07:42:24.023 回答
0

以下代码导致问题，

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

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

尝试在菜单标题和菜单上检测鼠标移出。检查这个答案如何做到这一点

JS代码

已经有很多插件可以做到这一点，使用其中任何一个并更改 css 以匹配您的站点

于 2012-04-06T07:45:24.773 回答