4

jqueryを使用してWebサイトの単純なサイドバーを作成しようとしていますが、ホバー機能に問題があります。ユーザーがカテゴリにカーソルを合わせると、サブメニューが表示されるはずです。上または下のカテゴリにカーソルを合わせると、サブメニューを閉じたいのですが。問題と、サブメニューが正常に閉じないことを示すためにjsFiddleを作成しました。私はこれを何時間も理解しようとしてきました、私はこれでどんな助けでも大いに感謝します。

http://jsfiddle.net/BGcDc/7/

ありがとうございました。

4

5 に答える 5

3

mouseleave関数でサブメントを非表示にするのを忘れました。$(this).find(".submenu").hide();既存のハンドラーに追加するだけです。

$(".category").mouseleave(function() {
    $(this).find(".submenu").hide();
    $(this).css("background-color", "#eee");
    $(this).css("border", "1px solid grey");
    $(this).css("border-bottom", "none");
    $(this).css("width", "180px");
    $(".category:last").css("border-bottom", "1px solid grey");
});
于 2012-06-06T03:08:45.190 に答える
2

http://jsfiddle.net/ahren/BGcDc/8/

$(".submenu").hide();ホバーの開始時にを追加するだけです。

于 2012-06-06T03:07:46.123 に答える
1

あなたはリストを隠すのを忘れました

$(".category").mouseleave(function() {

    $(this).find(".submenu").hide();

})

http://jsfiddle.net/BGcDc/10/

しかし、これはcssのみの生地で達成できます。

.category .submenu{ display:none}
.category:hover .submenu{ display:block}

そして、そこに到達したすべての.css（）境界線を削除します（さらに意味がありますが、クロスブラウザーアニメーションを作成して表示/非表示にする場合は意味があります）

于 2012-06-06T03:09:05.570 に答える
1

次のようにJavaScriptを変更するだけです。

$(".category").mouseleave(function() {
    // add this
    $(".submenu").hide();
    $(this).css("background-color", "#eee");
    $(this).css("border", "1px solid grey");
    $(this).css("border-bottom", "none");
    $(this).css("width", "180px");
    $(".category:last").css("border-bottom", "1px solid grey");
});
于 2012-06-06T03:09:55.703 に答える
1

jQuery メソッドは 2 つの.hover()パラメーターを受け入れます。2 番目のパラメーターで匿名関数オブジェクトを使用して、1 番目のパラメーターの関数でサブメニューを表示する方法と同様に、サブメニューを非表示にすることができます。

フィドル

要素にすでにリスナーがアタッチされてmouseleaveいる場合も、これは不要です。.hoverこちらもシンプルで読みやすいです。

フィドル

于 2012-06-06T03:11:53.443 に答える