jquery - jQueryでサブメニューを正しく開く

Question

私はjQueryにやや慣れていないので、「クリック」イベントで開くサブメニューを備えたモバイルメニューを作成しようとしています。

私の問題は、サブメニューを持つ「タイル」クラスの要素が他にもあり、明らかに、実際にクリックしたサブメニューのみを表示したいことです（現在のようにすべてではありません）。

これを試してみましたが、すべての「.tile」要素のサブメニューが開きます。

$(".tile").on("click", function () {
    $(".tile ul").css("display", "block");
});

正しい「.tile ul」のみを表示するには、これをどのように修正すればよいですか?

score 2 · Accepted Answer

$(".tile").on("click", function () {
    $(this).find('ul').css("display", "block");
});

また

.show()を使用する

$(".tile").on("click", function () {
    $(this).find('ul').show();
});

thisキーワードは現在の要素を参照します。

score 0 · Accepted Answer

複数のサブメニューがない限り、@ TusharGuptaには良い答えがあります（私は賛成しました）。もしそうなら、これを使用してください：

$(".tile").on("click", function () {
    $(this).children('ul').css({display:'block'});
});

これにより、すべての子ではなく、アイテムの直接の子のみが開きます。それ以外の場合.find()は、最もパフォーマンスが高いため、を使用することをお勧めします。

2 に答える 2