javascript - 无法触发位于 "trigger DIV"内的扩展 DIV 内的事件

Question

我有一个 div，我想在点击时展开。如果我将一个 div 放置在我想要折叠的 div 内，使用 Bootstrap Collapse 或 AngularUI Collapse 效果很好。代码如下所示:

<div id="closestShip">
  <a data-toggle="collapse" href="#closeShipExpand">Nærmeste skøyte<img width="10%" src="/app/content/images/stedsmark.svg"><img /></a>
  <div class="collapse" id="closeShipExpand">
    <div id="closeShip1">
      <div class="closeShipNM"><span>4,2</span> nm</div>
      <div class="closeShipName">{{Skoyte.Navn}}</div>
    </div>
    <div id="closeShip2">
      <div class="closeShipNMOther">8,9 nm</div>
      <div class="closeShipNameOther">RS 160 Horn Rescue</div>
    </div>
    <div id="closeShip3">
      <div class="closeShipNMOther">8,9 nm</div>
      <div ng-click="test()" class="closeShipNameOther">RS 160 Horn Rescue</div>
    </div>
    <div id="closeShipFooter">
      <a data-toggle="collapse" href="#closeShipExpand" id="closeButtonClosestShip">Skjul <span id="crossClosestShip" class="closeCross"></span></a>
    </div>
  </div>
</div>

问题是折叠的 DIV 内似乎没有任何事件响应。不是data-toggle 或ng-click。如果我将 DIV 放在“触发 DIV”外部，则一切正常。 “触发 DIV”中是否有某些内容覆盖或取消了其中触发的所有事件？我该如何解决这个问题？

Answer 1

使用 bootstrap(和 Angular，但我的示例是 bootstrap)，您不需要将 div 放在折叠 div 内。

关键是将data-target设置为折叠div的id。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>