使用特定元素执行某些操作，即使单击事件是对类名触发的。

Question

我有一个场景，下拉启动菜单应该出现在列表页面的每一行上。我已经修改了代码这里。

我希望弹出(打开)行为被限制为点击特定的启动-图标，虽然关闭行动是完美的这里。

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

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

// 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();
});

更新的CodePen

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