Question

我的jquery菜单有点问题。我工作得很好，但是如果你将鼠标悬停在按钮上3到4次，菜单会重复扩展3到4次，所有你可以做到等待它退出。有人可以告诉我如何阻止这个？这是我正在使用的javascript：

<script type="text/javascript">
$(function () {
      $('#dropMenu .level1 .submenu.submenu').hover(function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
}, function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
});});
</script>

非常感谢对此的任何见解。

由于

Answer 1

嘿罗伯特，我讨厌一个简单的悬停动作会产生意想不到的结果。随着时间的推移，我开发了一些解决元素轻弹的方法。

假设你有这样的菜单结构;

<div id="nav">
  <ul>
    <li>
      <a href="...">Home</a>
      <ul>
        <li><a href="...">New Products</a></li>
        <li><a href="...">All Products</a></li>
        <li><a href="...">Specials</a></li>
        <li><a href="...">Search</a>
          <ul>
            <li><a href="...">Site</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS就像这样;

<style>
  #nav ul li ul{
    display:none;
  }
</style>

jQuery之类的东西;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
  $("#nav ul li").each(function(){
    $(this).mouseenter(function(){
      $(this).find("ul:first").show();
    }).mouseleave(function(){
      $(this).find("ul:first").hide();
    });
  })
</script>

注意，在此示例中，我使用的是.mouseenter()和.mouseexit()，而不是.hover()。

为什么.hover()在此示例中没有达到预期效果？悬停仅适用于单个元素，当您将鼠标悬停在元素内的某个元素上时，它是一个新元素。

一个很好的例子是jQuery API Documentation

我希望这可以解决你的悬停问题。

Answer 2

您可以添加一个变量来指示动画何时处于活动状态，并且如果前一个动画尚未完成，则不允许另一个动画启动。

var isAnimating = false;
$(function () {
      $('#dropMenu .level1 .submenu.submenu').hover(function() {
if (!isAnimating) {
  $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
  $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
  isAnimating = true;
}
}, function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
isAnimating = false;
});});

悬停时，jquery下拉菜单会反复打开

2 个答案: