防止 Bootstrap 5 Accordion 崩溃

问题描述

我正在使用 Bootstrap 5 的 Accordion 组件。好消息：它运行良好！

但是折叠手风琴的按钮很大，所以我想在其中添加一个额外的链接，用于一些额外的东西。

    <div class="accordion accordion-flush" id="myaccordion">
        <div class="accordion-item">
<!-- important part starts here -->
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-001" aria-expanded="false" aria-controls="collapse-001">
                <img src="https://picsum.photos/50/50" alt="such a nice pic"/>
                <p>Sneak peek of what will appear</p>
                <a href="http://www.lets-go.out">Let's go</a>
            <button>
<!-- important part is over -->
            <div id="collapse-001" class="accordion-collapse collapse" aria-labelledby="heading-001" data-bs-parent="#myaccordion">
                <div class="accordion-body">
                    <p>Hidden stuff goes here</p>
                </div>
            </div>
        </div>
        
        <div class="accordion-item">
            ...
        </div>
    </div>

我想要的是：单击按钮中的任意位置将打开手风琴，但如果我单击链接则不会。如果我点击链接，我想关注href。

我得到了什么：点击按钮中的任何地方都会打开手风琴，即使我点击了链接。

我试图在链接上添加一个额外的 e.preventDefault() 或 e.stopPropagation()，但没有成功:(

有什么想法吗？

解决方法

我尝试将锚点嵌套在按钮内，但不起作用。单击事件总是在按钮级别捕获。 我没有检查引导源代码来检查替代方案，但找到了一种使用以下方法实现您所要求的方法：将按钮和链接都作为 div 的子项并使用 css 进行调整以使其在视觉上保持在同一“行”。

    <h2 class="accordion-header" id="headingOne">
      <div class="d-flex">
        <div class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
        </div>
        <a class="outlink" href="https://pullman.clubify.cl">Let's go</a>
      </div>
    </h2>