javascript - jquery 下拉菜单在悬停时重复打开

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 就是一个很好的例子

我希望这能解决您的悬停问题。