jquery - Opening submenu correctly in jQuery

Question

I'm somewhat new to jQuery, and I try to create a mobile menu with submenus which open on "click" event.

My problem is: There are more elements with the "tile" class that have a submenu, and obviously I only want to display the submenu of that one I actually clicked on (not all of them as it happens now).

I tried this, but it opens the submenu of all ".tile" elements:

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

How should I correct this to display only the correct ".tile ul"?

Answer 1

使用这个关键字

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

或者

使用.show()

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

this关键字是指当前元素。

Answer 2

@TusharGupta 有一个很好的答案（我赞成），只要你没有多个子菜单。如果你这样做，那么使用这个：

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

这只会打开项目的直接子项，而不是所有子项。否则，.find()首选使用 ，因为它的性能最高。