2

ここで私のライブデモを見ることができます。ドロップダウンメニューを正しく表示したい。これで、最初にクリックしたときに突然非表示になります。そして、現在表示されているドロップダウンメニューの外側をクリックすると、ドロップダウンメニューが消えるようにしたいです。どうすればいいですか？

これは私のjQueryコードです

$(document).ready(function () { 
    $('#jsddm > li').click(function(e){
        e.preventDefault();
        $(this).find('ul').eq(0).css('visibility', 'visible').slideToggle();
    });
});

.css('visibility', 'visible')削除すると、ドロップダウンメニューが機能しなくなることに気づきました。

4

3 に答える 3

4

関数は「li」要素をクリックしたときにのみ呼び出されるため、ドキュメント内の他の場所をクリックしても効果はありません。メニューを非表示にするクリックイベントを本文全体に追加できます。これを行うには、メニューのクリックイベントがドキュメントにバブリングするのを停止する必要もあります。そうしないと、表示されてすぐに非表示になります。

次のようなものを試してください。

$(document).ready(function () {

$('#jsddm > li').click(function(e){
      e.stopPropagation();
      e.preventDefault();
      $(this).find('ul').eq(0).slideToggle();
});

$(document).click(function (e) {
    $('#jsddm > li').find('ul').eq(0).slideUp();
});

}）;

また、visibility：hiddenを使用する必要はありません。これは、より多くの作業を実行する原因になります。これが私がCSSに対して行った編集と、上記の編集されたコードであり、私が作成したローカルコピーで機能しているようです。

交換

#menu #jsddm li ul{margin: 0; padding: 0; position: absolute; visibility: hidden; width:220px; z-index:9999;}

と

#menu #jsddm li ul{margin: 0; padding: 0; position: absolute; display:none; width:220px; z-index:9999;}
于 2012-12-19T03:09:21.517 に答える
1

最初に、すべてのタグの「表示」を「なし」に設定してみてください。

$(document).ready(function () { 
   $('#jsddm > li > ul').css("display", "none");
   // ur code
}
于 2012-12-19T02:59:39.753 に答える
0

たぶん、最初にすでに表示されているかどうかを確認してから、コードを実行する必要があります。何かのようなもの：

$(document).ready(function () { 
    $('#jsddm > li').click(function (e) {
        e.preventDefault();
        if ($(this).find('ul').eq(0).is(':visible')) {
            $(this).find('ul').eq(0).slideUp();
        } else {
            $(this).find('ul').eq(0).slideDown();
        }
    });
});
于 2012-12-19T02:49:26.377 に答える