为啥 HoverIntent 不起作用？

Posted 2023-05-08

【中文标题】为啥 HoverIntent 不起作用？

【英文标题】：Why HoverIntent is not working?为什么 HoverIntent 不起作用？

【发布时间】：2012-07-09 18:47:06

【问题描述】：

我正在尝试制作一个下拉菜单，但我在使用 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”上，它会正确滑动，但如果之后我将鼠标移出并再次进入并再次离开，它将保持向上和向下滑动.看起来如果有一个堆栈添加它发生的每个事件！

【问题讨论】：

为什么要用hoverintent做幻灯片效果？

【参考方案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) 立即停止当前动画。

【讨论】：

如果答案让您满意，您可以选择它作为接受吗？谢谢！