我有一个带有子菜单的菜单列表,这些子菜单没有嵌套用于样式目的。 因此,我将mouseenter和mouseleave以及settimeout一起用于悬停行为。

这是我的html:

<li class="dropdown"><a href="#">Link 1</a></li>
<div class="subnav">
<ul>
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>  
<li><a href="#">Link 1.4</a></li>  
    </ul>
</div>

<li class="dropdown"><a href="#">Link 2</a></li>
<div class="subnav">
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>  
<li><a href="#">Link 2.4</a></li>  
    </ul>
</div> 

<li class="dropdown"><a href="#">Link 3</a></li>
<div class="subnav">
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>  
<li><a href="#">Link 3.4</a></li>  
    </ul>
</div> 

</ul>
</div><!-- End topNav -->

而我的jQuery:

$(document).ready(function(){  

var overSubmenuFlag = false;
var timeout;
var subnav;
var offset;

$("li.dropdown").mouseenter(function(){

    clearTimeout(timeout);
    $(".subnav").hide();

    $(this).children('a').addClass("active"); //Add active class to link element

    var subnav = $(this).next("div.subnav"); //find navigation box associated with this nav tab
    var offset = $(this).position(); //Position subnav relative to nav tab
    var leftpos = (offset.left + 15) + "px";
    var toppos = (offset.top + 36) + "px";
    subnav.css( { 
        position: 'absolute',
        left: leftpos, 
        top: toppos
    });

    subnav.show(); //Reveal subnav

}).mouseleave(function() {
    clearTimeout(timeout);
    var timeout = setTimeout(function() {
        if(!overSubmenuFlag) {
            var subnav = $("li.dropdown").next("div.subnav");
            subnav.hide();
            $("li.dropdown").children('a').removeClass("active");       
        }},100);        
});
$(".subnav").mouseenter(function(){
    clearTimeout(timeout);
    overSubmenuFlag = true;  
}).mouseleave(function(){   
    overSubmenuFlag = false; 
    $(".subnav").hide();
    $("li.dropdown").children('a').removeClass("active");       
}); 
});  

一切都按预期工作,除了以下各项:当我将鼠标移出一个导航标题并快速将鼠标悬停在另一个标题上时,与新标题相关联的子菜单会短暂出现,然后消失。 (在两个导航标题之间缓慢移动即可正常工作)。 输入新导航后,如何正确停止与setTimeout函数关联的所有操作(并关闭所有打开的子菜单)。 标头? 非常感谢您的帮助!

===============>>#1 票数:0

这是你的问题吗?

}).mouseleave(function() {
    clearTimeout(timeout);
    var timeout = setTimeout(function() {
    ^^^

  ask by Jean-Ralphio translate from so

未解决问题?本站智能推荐:

1回复

使用setTimeout,mouseenter,mouseleave的jQuery导航菜单

我无法找到在三个主选项卡之间悬停时此jQuery菜单中断的问题。 如果我将鼠标悬停在菜单上,则菜单将起作用,然后在选择另一个选项卡之前将鼠标悬停一路...我认为问题可能与变量的范围(在jQuery中称为“ n”)或setTimeout()方法有关。
1回复

使用jQuery setTimeout滚动div和mouseenter和mouseleave

我有一个div容器,它粘在页面底部。 当鼠标移出div时,我希望div在3秒后下沉。 当鼠标移到div上时,我希望div升至其原始位置。 问题是,当鼠标非常快地移入和移出div时,div会继续向上移动到页面顶部。
3回复

mouseenter / mouseleave受嵌套子对象的影响

我在准备好文档时隐藏了控制面板( myNestContainer )。 我有一个名为按钮navMyNest当mouseenter出现,显示myNestContainer 。 这很好。 问题是,我希望用户能够探索控制面板,但鉴于有嵌套DIV容器在myNestContainer ,只要输入
1回复

使用jQuery创建导航栏:背景问题

我在on()和off()上遇到问题。 我创建了一个导航栏,当您将鼠标悬停在其上方或单击的最后一个div时,我希望该导航栏为蓝色。 因此,我使用了mouseenter / mouseleave(因为我希望颜色逐渐改变),并且使用了off()和on(),因为当div被单击时(作为最后一个),
1回复

交换mouseenter以将鼠标悬停在巨型菜单灯箱的代码中

我有一个使用悬停功能来延迟下拉菜单的大型菜单,我还为菜单设置了灯箱效果,但是代码使用mouseenter和mouseleave,问题是虽然下拉菜单会延迟灯箱效果,因此一旦鼠标经过灯箱就会被触发。 有什么办法可以将下面的代码更改为使用hoverintent而不是mouseenter / mous
2回复

Firefox中的jQuery Mouseenter / Mouseleave问题

我只在Firefox中遇到mosueenter / mouseleave事件的问题... http://www.screencast.com/users/StanleyGoldman/folders/Jing/media/be3572de-9c72-4e2a-8ead-6d29b07647
1回复

jQuery mouseenter / mousleave IE 10问题

我使用jquery的mouseenter / mousleave创建了一个导航。 在除IE 10之外的所有浏览器下均可正常运行。 https://jsfiddle.net/a8omouec/2/ 但是,在IE10中,将鼠标悬停在导航项上时,文本和图像会重叠。 找不到解决方案
1回复

尝试创建隐藏的导航栏时出现MouseEnter和Mouseleave问题

我试图创建一个隐藏的导航栏,将其悬停时宽度会增加,并且当光标离开导航栏时,它会缩小到其原始宽度。 我正在使用jQuery和Parallax.js,但mouseenter或mouseleave等的组合似乎无效。 作为我尝试执行的操作的示例,请点击以下链接: http://www.glam
3回复

jQuery mouseenter / mouseleave html()-swap问题

我有以下Javascript / jQuery函数: 它有效,但并非完美。 div有时会稍微重叠(不要问),并且如下图所示,它们并不总是获得“ Out”值。 特别是如果我将指针快速移到它们上方时,就会发生这种情况。 有什么想法可以确保每个div在mouseleave上都获得“
1回复

jQuery问题,在mouseenter队列上禁用

当您在.li_group类上输入mouseent时,它会在1个<li>标记上执行向下滑动效果,一切都会顺利进行,但是在延迟时间内,如果您将鼠标移到.li_group上,则会“排队”该效果并将li向下滑动,延迟,将其再次滑下,等等,等等。。。我尝试了所有可以想到的方法,甚至stop()