0

ホバーすると、サブメニューに追加してマウスリーブで削除することにより、現在ホバーされているアイテムのサブナビを表示するメニューがあります.stick。別のメニュー項目にカーソルを合わせていない場合は、最後にホバーしたメニュー項目をさらに 2 秒間開いたままにしてから非表示にします。

これが私が持っているものです。mouseleave()ホバー関数の handlerOut 内にあるため、コンテナーで呼び出された関数が機能しないことはわかっていul#main-nav > liますが、最後に中断した場所を示すために残しました。

$('ul#main-nav > li').hover(function() {
    var $this = $(this);
    clearTimeout(window.menustick);
    $this.find('ul.submenu').addClass('stick');
}, function() {
    var $this = $(this);
    if($this.siblings().hover()) {
        $this.find('ul.submenu').removeClass('stick');
    } else if ($('#main-nav').mouseleave()) {
        window.menustick = setTimeout(function(){
            $this.find('ul.submenu').removeClass('stick');
        }, 2000);
    }
});

これがjsFiddleです。

前もって感謝します！

4

2 に答える 2

0

スクリプトと CSS にいくつか問題がありました。

まず、CSS には次のルールがありました。

nav ul#main-nav li:hover > ul.submenu {
   display: block;
}

これを次のように変更する必要があります。

nav ul#main-nav li > ul.submenu.stick {
     display: block;
}

これは、CSS がクラス「スティック」ではなく可視性を制御していたことを意味します。

ご指摘のとおり、スクリプト コードでの.hover()andの使用は正しくなく、必須ではありません。.mouseleave()その時点で、あなたはすでに のmouseleave(handlerOut) にいhoverます。

以下のコードは、探していた目的の効果を実行するように見えます。

var menuStickTimeoutId;
$('ul#main-nav > li').hover(function () {
    var $this = $(this);
    clearTimeout(menuStickTimeoutId);
    $('#main-nav ul.submenu').removeClass('stick');
    $this.find('ul.submenu').addClass('stick');
}, function () {
    var $this = $(this);
    clearTimeout(menuStickTimeoutId);
    menuStickTimeoutId = setTimeout(function () {
        $this.find('ul.submenu').removeClass('stick');
    }, 2000);
});

実際のデモ: http://jsfiddle.net/3F7bJ/2/

于 2013-08-01T05:05:44.987 に答える