javascript - 即使在类名上触发了单击事件，也对特定元素执行某些操作

Question

我有一个场景，下拉启动器菜单应该出现在列表页面的每一行上。我调整了代码 here .

我希望限制弹出窗口(打开)行为，以单击特定的启动器图标，尽管关闭操作在这里是完美的。

问题是当单击任何图标时，它会显示所有菜单。我的页面有从数据库中扩充的行，每行都有三个这样的启动器图标。

我想这段代码需要一些调整:

// Click event handler to toggle dropdown
$(".button").click(function(event){
    event.stopPropagation();
    // How can I call toggle for the specific div element?
    $(".app-launcher").toggle();
});

如何做到这一点？

Answer 1

您需要遍历 DOM 来查找与单击的 .button 元素相关的 .app-launcher 实例，为此，请使用 closest( ) 和 find()，如下所示:

$(".button").click(function(event){
    event.stopPropagation();
    $(this).closest('.launcher').find(".app-launcher").toggle();
});

Updated CodePen

我还建议考虑使用 .app-launcher 的单个实例，并根据需要在 DOM 中移动它以干燥您的 HTML 代码。