爲什麼HoverIntent不起作用？

我試圖做一個下拉菜單，但我有一些hoverIntent指令的問題。爲什麼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」它正確地使slideDown，但如果在那之後我移動鼠標並且再次進入並且再離開它將停留s上下傾斜。它看起來像是有一個堆棧添加它發生的每一個事件！

來源

2012-07-10 M0N0NE

爲什麼你使用'hoverintent'作爲幻燈片效果？ – undefined 2012-07-10 10:02:27

正如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(); 
    } 
);

的第一個參數（真）清除隊列，第二個參數（假）現在停止當前動畫。

來源

2012-07-10 10:27:35 mdup

如果答案符合您的要求，您可以選擇接受嗎？謝謝！ – mdup 2012-07-12 18:35:04

爲什麼HoverIntent不起作用？

回答

相關問題