jQuery 菜单中的 jQuery 问题绑定功能答案

【问题标题】：jQuery issue binding function in a jQuery menujQuery 菜单中的 jQuery 问题绑定功能
【发布时间】：2014-11-08 16:50:31
【问题描述】：

我正在尝试一个简单的 jQuery 菜单，在悬停时显示子菜单，如果我使用“显示”和“隐藏”功能，一切正常，但如果我绑定像 slideDown 或 Up 这样的功能，它将重复该功能直到光标离开绑定的 LI 对象。

$('.myMenu > li').on('mouseover', openSM);
$('.myMenu > li').on('mouseout', closeSM);

function openSM() {
    $(this).find('ul').show();  
};

function closeSM() {
    $(this).find('ul').hide();  
};

当我将show() 和hide() 设置为slideDown() 和slideUp() 时，它基本上会在其上的所有子菜单上重复。

<li><a href="#">menu item</a>
   <ul>
        <li><a href="#">sub menu item 1</a></li>
        <li><a href="#">sub menu item 2</a></li>
        <li><a href="#">sub menu item 3</a></li>
        <li><a href="#">sub menu item 4</a></li>
    </ul>
</li>

在每个子菜单项上，它都会重复该功能...这意味着它会重复上下滑动。好吧，我想做的是将它设置为仅在它离开 LI 对象时使用该功能，而不是在它悬停在子菜单时...

我将 bind 替换为 on，但它仍然不适用于 slideDown 和 Up 函数...有什么帮助吗？

【问题讨论】：

bind 已被弃用一段时间，您应该使用on
哦，谢谢。你说得对。我的错。

标签： jquery html css

【解决方案1】：

使用mouseenter 和mouseleave 代替mouseover 和mouseout。见

Jquery mouseenter() vs mouseover()

用于解释有子元素时的差异。

$('.myMenu > li').bind('mouseenter', openSM);

$('.myMenu > li').bind('mouseleave', closeSM);

function openSM() {
  $(this).find('ul').slideDown();
};

function closeSM() {
  $(this).find('ul').slideUp();
};

.myMenu > li ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myMenu">

  <li>
    <a href="#">menu item
      </a>
    <ul>
      <li><a href="#">sub menu item 1</a > </li>
        <li><a href="#">sub menu item 2</a > </li>
        <li><a href="#">sub menu item 3</a > </li>
        <li><a href="#">sub menu item 4</a > </li>
    </ul >
  </li>
        </ul >

【讨论】：

【解决方案2】：

我只是想稍微扩展一下@Barmar 的答案，以修复一个恼人的错误。向slideUp 和slideDown 传递一个回调函数，以在将鼠标指针在主列表项上来回移动多次后阻止列表上下跳跃：

$('.myMenu > li').bind('mouseenter', openSM);

$('.myMenu > li').bind('mouseleave', closeSM);

function openSM() {
  $(this).find('ul').slideDown(function(){
     $(this).stop(true);
  });
};

function closeSM() {
  $(this).find('ul').slideUp(function(){
     $(this).stop(true);
  });
};

.myMenu > li ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myMenu">

  <li>
    <a href="#">menu item
      </a>
    <ul>
      <li><a href="#">sub menu item 1</a > </li>
        <li><a href="#">sub menu item 2</a > </li>
        <li><a href="#">sub menu item 3</a > </li>
        <li><a href="#">sub menu item 4</a > </li>
    </ul >
  </li>
        </ul >

【讨论】：