可以't触发容纳在其内部的扩展DIV内部的事件's”;触发DIV”;

Can't trigger events inside an expanded DIV that is housed inside it's "trigger DIV"

本文关键字：DIV 内部 扩展 事件 触发 可以      更新时间：2023-09-26

我有一个div，我想在单击时展开它。使用Bootstrap Collapse或AngularUI Collapse，如果我在要折叠的div中放置一个div，效果会很好。代码如下：

<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"中的某个内容覆盖或取消了其中触发的所有事件吗？我该怎么解决这个问题？

使用bootstrap（和angular，但我的例子是bootstrap），您不需要将div放在collapsediv中。

关键是将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>

相关文章：