1

ホバー時にサブメニューを展開するナビゲーションバーをまとめました。私のjsFiddleを参照してください。

メニュー項目にカーソルを合わせると、サブメニューが親<nav>（私は青色で表示）を超えて展開されます。私が求めているのは、青い<nav>要素が子供とともに拡大すること<ul>です。

jQueryまたはcssソリューションが必要かどうかはわかりませんが、これまでに試したことはすべて無駄でした。

と

マウスがナビゲーションをすばやく横切って、たとえば「MENU3」から「MENU1」に移動し、「ONE A」などのサブメニュー項目に置かれると（実際に表示される前）、jQueryは繰り返しループでスタックします。各サブメニューが開いたり閉じたりします。

これを防ぐために何を変更する必要がありますか？

4

2 に答える 2

2

$（this）.find（'ul'）の後にstop（）を追加すると、アニメーションに役立ちます。

$(document).ready(

function() {
    $('.menu li ul').hide();
    $('.menu li').hover(function(e) {
        $(this).find('ul').stop().slideToggle("slow");
    });
});

また、メニューが展開されない理由は、「。menuliul」が絶対位置に設定されているためです。要素が絶対位置にある場合、通常の流れから削除されます

于 2012-06-21T09:10:10.753 に答える
0

これは、アニメーションがキューに入れられ、強制的に停止しない限りアニメーションが実行され続けるために発生します。

JQueryの 関数stop()はここで役に立ちます。

stop(clearQueue, jumpToEnd)-一致した要素で現在実行中のアニメーションを停止します。

$(this).find('ul').stop(true, true).slideToggle("slow");

更新されたフィドルを確認してください：http：//jsfiddle.net/aQBeZ/9/

于 2012-06-21T09:10:32.277 に答える