为什么 HoverIntent 不起作用？

Question

我正在尝试制作一个下拉菜单，但我在使用 hoverIntent 指令时遇到了一些问题。

Javascript 代码：

$('li.dropdown').hoverIntent(
    function() {
        $(this).find('ul.submenu').slideDown();
    },
    function() {
        $(this).find('ul.submenu').slideUp();
    }
);

HTML 代码：

<div id="div_menu">    
      <ul class="menu"> 
           <li class="leaf"><a href="#" style="color:#2154A3;">Inici</a></li> 
           <li class="dropdown"> 
                <a href="#">Facultats</a> 
                <ul class="submenu">
                    <li style="margin:3px; border:none;"></li>
                    <li><a href="#">IQS</a></li> 
                    <li><a href="#">UIC</a></li> 
                    <li><a href="#">UPF</a></li> 
                    <li><a href="#">ESCI</a></li>
                </ul>
           </li> 
           <li class="leaf"><a href="./instalaciones.html">Instal·lacions</a></li> 
           <li><a href="">Contacte</a></li>  
     </ul>
</div>

CSS 代码：

.leaf {
    border-right: solid 1px #333;
}

.dropdown {
    border-right: solid 1px #333;
}

使用悬停功能它可以正常工作，但是如果我将鼠标放在“li”上，它会正确滑动，但如果之后我将鼠标移出并再次进入并再次离开，它将保持向上和向下滑动.看起来如果有一个堆栈添加它发生的每个事件！

Answer 1

正如http://api.jquery.com/hover/ 的示例中所建议的，您可以使用jQuery 的stop() 来确保不会执行您不想要的额外动画。

$('ul.submenu').slideUp(); /* Hide your menu when the page gets loaded */

$('li.dropdown').hover(
    function() {
       $('ul.submenu').stop(true, false).slideToggle();
    }
);

第一个参数 (true) 清除队列，第二个参数 (false) 立即停止当前动画。