在jQuery中正确打开子菜单

Question

我对jQuery有些新手，我尝试创建一个带有子菜单的移动菜单，该菜单在“点击”事件中打开。

我的问题是： “tile”类中有更多元素具有子菜单，显然我只想显示我实际点击的那个子菜单（不是现在发生的所有子菜单）。

我尝试了这个，但它打开了所有“.tile”元素的子菜单：

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

我该如何纠正这个只显示正确的“.tile ul”？

Answer 1

使用this keyword

$(".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()，因为它是最高效的。