2

我试过这个js代码：

<script type="text/javascript">

       $(document).ready( function() {
            var timer;
            $('.top-menu-first-ul li').hover(function(){
                        if(timer) {
                                clearTimeout(timer);
                                timer = null
                        }
                        timer = setTimeout(function() {
                                   $(this).find('ul').slideToggle(100);
                        }, 500)
            },
            // mouse out
            });
        });


</script>

使用这个 html：

<ul class="top-menu-first-ul">
    <li>
        <a href="http://google.com">Google</a>
        <ul class="top-menu-second-ul">
            <li><a href="http://translate.google.com">Google Translate</a></li>
            <li><a href="http://images.google.com">Google Images</a></li>
            <li><a href="http://gmail.google.com">Gmail</a></li>
            <li><a href="http://plus.google.com">Google Plus</a></li>
        </ul>
    </li>
    <li>
        <a href="http://facebook.com">Facebook</a>
    </li>
    <li>
        <a href="http://twitter.com">Twitter</a>
    </li>
</ul>

但它不工作。

我想在将鼠标悬停在例如 Google 链接上时显示子菜单，其他将在 300 毫秒后出现。

因此，当用户快速将鼠标悬停在子菜单上并且不停留在悬停链接上至少 300 毫秒时，我需要防止加载子菜单。

然后，当他离开链接时，我需要停止执行代码（或向上滑动）。因为如果他反复来回反复几次，他就会停止悬停，并且代码仍在执行自己多少次他将鼠标悬停在链接上。我需要以某种方式防止这种情况发生。

编辑：我需要在没有像 hoverIntent 等插件的情况下解决这个问题。如果可能的话，只需简单的 javascript 和 jQuery

4

2 回答 2

6

用于stop()防止动画怪异并delay()等待 300 毫秒。也不hover()推荐使用，我建议on()改用：

$('.top-menu-first-ul li').on({
  mouseover: function() {
    $(this).find('ul').stop(1,1).delay(300).slideDown(100);
  },
  mouseleave: function() {
    $(this).find('ul').stop(1,1).slideUp(100);
  }
});

演示：http: //jsfiddle.net/elclanrs/6dtWz/

于 2012-09-08T22:04:08.410 回答
3

我认为这个问题是您$(this)在超时调用的函数内部使用。$(this)此闭包内部与外部不同（在 jQuery 为您设置的 jQuery 事件处理程序内部）。这里（jsfiddle）是解决方案：

$(document).ready( function() {
            $('.top-menu-first-ul li').mouseenter(mouseIn);
            $('.top-menu-first-ul li').mouseout(mouseOut);
});
function mouseIn(e){
    var target = $(this);
    var timer = setTimeout(function() {
                   target.find('ul').slideDown(100);
        }, 500);
    target.attr("data-timer", timer);
}

function mouseOut(e){
    var target = $(this);
    var timer = target.attr("data-timer");
    if(timer){
        clearTimeout(timer);
    }
    target.find('ul').slideUp(100)
}
​

更新此解决方案基于您的解决方案，但我建议使用@elclanrs 的解决方案，因为它更好（更具可读性，使用用于此目的的 jQuery API）。

于 2012-09-08T22:04:56.440 回答