手风琴标题中的引导链接：stopPropagation 不起作用答案

【问题标题】：bootstrap link in accordion header: stopPropagation not working手风琴标题中的引导链接：stopPropagation 不起作用
【发布时间】：2021-07-20 17:23:17
【问题描述】：

我正在尝试在单击事件上使用 stopPropagation 将外部链接添加到引导手风琴标题。

很遗憾，链接失效了，手风琴的展开/折叠仍然发生。

html:

<ul class="accordion" id="collapse1">
  <li>
    <div class="accordion-button collapsed" href="#one" 
         data-bs-toggle="collapse" data-bs-target="#one" aria-expanded="false">
         Maincategory
         &nbsp;/&nbsp;
         <a href="https://google.com" class="non-collapsing">
           open
         </a>
    </div>
    <ul class="accordion-collapse collapse" id="one" data-bs-parent="#collapse1">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
      <li><a href="#">Sub 3</a></li>
    </ul>
  </li>
</ul>

js:

$('.non-collapsing').on('click', function (e) {
    e.stopPropagation();
});

jsfiddle：https://jsfiddle.net/ct503zgf/

任何人都可以提示为什么这不起作用吗？

【问题讨论】：

运气好，我也面临同样的问题

标签： twitter-bootstrap collapse bootstrap-accordion

【解决方案1】：

将data-bs-toggle="collapse" 和一个空的data-bs-target 添加到链接元素对我有用。（也适用于 <button> 而不是 <a>）

<ul class="accordion" id="collapse1">
  <li>
    <div class="accordion-button collapsed" href="#one" 
         data-bs-toggle="collapse" data-bs-target="#one" aria-expanded="false">
         Maincategory
         &nbsp;/&nbsp;
         <a href="https://google.com" class="non-collapsing" data-bs-toggle="collapse" data-bs-target>
           open
         </a>
    </div>
    <ul class="accordion-collapse collapse" id="one" data-bs-parent="#collapse1">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
      <li><a href="#">Sub 3</a></li>
    </ul>
  </li>
</ul>

jsfiddle：https://jsfiddle.net/Lkfdr2vt/

【讨论】：