即使在类名上触发click事件，也要对特定元素执行某些操作

Question

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

我希望限制特定启动器图标上的popover（打开）行为，尽管此处的关闭操作非常完美。

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

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

// 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以查找与所点击的.app-launcher元素相关的.button实例，使用closest()和find()执行此操作，如下所示：

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

Updated CodePen

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