1

ドロップダウンメニューを作成しようとしていますが、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」の上に置くとスライドダウンが正しく行われますが、その後マウスを動かしてもう一度入力し、そのままにしておくと、上下にスライドしたままになります。発生したすべてのイベントを追加するスタックがあったように見えます！

4

1 に答える 1

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) はキューをクリアし、2 番目の引数 (false) は現在のアニメーションを停止します。

于 2012-07-10T10:27:35.943 に答える