Question

我有一个场景，点击父容器应该打开一个隐藏的div。但是当点击位于同一父容器中的锚点或按钮时 - 应该发生它们的自然动作，而不是内部div的打开/关闭。

HTML：

<div id="row1" class="ticketRow alert">
  <div class="btn-group actionButtons">
    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle btn-default">Menu <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="javascript:;" data-action="close">Task 1</a></li>
      <li class="divider"></li>
      <li><a href="javascript:;" data-action="pending">Task 2</a></li>


    </ul>
  </div>

  <div class="ticketMeta">Ticket Meta</div>

  <a class="btn" href="javascript:alert('hello');">text link</a>
</div>

Jquery的：

$(".ticketRow").on("click", function() {
  $(this).find(".ticketMeta").slideToggle();
});
$(".ticketRow .btn").click(function(e) {
  e.stopPropagation();
});

所以会发生的是，代码是<a>锚的工作，而不是下拉/按钮。也就是说，当你点击按钮时 - 没有任何事情发生（一切都被阻止），当发生什么时，只有菜单应该打开。实际上，上面的这个jquery看起来似乎是以一种不经济的方式编写的，因为它在每次点击时都会解析这两段代码（我想，对吧？）

JSFIDDLE：https://jsfiddle.net/kneidels/24de8rLz/2/

由于

Answer 1

您可以简单地修改父容器事件监听器的事件处理程序，如下所示。

if(event.currentTarget.id == event.target.id){
  $(this).find(".ticketMeta").slideToggle();
}

这可以解决您的问题。

并删除

e.stopPropagation();

在父母一起行动，但不是特定的孩子

1 个答案: