Bootstrap 折叠式标题中引导程序链接：stopPropagation不工作

6mw9ycah 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(186)

我尝试在click事件上使用stopPropagation向引导程序折叠式标头添加外部链接。
不幸的是，链接不起作用， accordion 的展开/折叠仍然发生。
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

来源：https://stackoverflow.com/questions/67281841/bootstrap-link-in-accordion-header-stoppropagation-not-working

2条答案

按热度按时间

wgxvkvu91#

在link元素中添加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/的参数值

赞(0）回复(0）举报 2022-12-07

xqkwcwgp2#

在遇到同样的问题后，我读了你的解决方案。这个解决方案让我找到了正确的方法，但是在非折叠元素中添加 data-bs-toggle=“collapse”data-bs-target 就足够了。JavaScript代码不是必需的。

赞(0）回复(0）举报 2022-12-07