jquery - 当一个元素有 onclick 处理程序时，不会触发 Bootstrap 折叠

Question

我想创建一个折叠 Bootstrap :

<div id="stat" style="border-style: ridge;border-width: 1px;border-radius: 3px;display:none;">
   <button class="btn btn-light" type="button" data-toggle="collapse" data-target="#collapseVehicules" aria-expanded="false" aria-controls="collapseVehicules" style="width: 100%;">
      <div style="float:left;">boutons</div><div id="chevron" data-nb-clics="0" style="float:right;"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
   </button>
   <div class="collapse" id="collapseVehicules">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
   </div>
</div>

如您所见，按钮内有 #chevron div。我为其编写了一个处理程序:

$("#chevron").on("click", function() {
      if (parseInt($(this).data("nbClics")) % 2 == 0) {
        $(this).html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
      } else {
        $(this).html('<i class="fa fa-chevron-right" aria-hidden="true"></i>');
      }
      $(this).data("nbClics", parseInt($(this).data("nbClics"))+1);
});

在运行时，当我单击#chevron 元素时，折叠不起作用，但仅更改#chevron 的内容!

Answer 1

#chevron 元素是按钮内的一个 div，我猜测 div 单击事件永远不会冒泡到按钮。您随时可以添加到已有的代码中:

$('#collapseVehicules').collapse("toggle");

编辑:你说它不起作用，因为你不想提供你的代码，这里有一个示例:https://jsfiddle.net/rp4e2s1k/