防止Bootstrap 5手风琴折叠 [英] Prevent Bootstrap 5 Accordion from collapsing

问题描述

我正在使用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.PrevenentDefault()或e.stopPropagation()，但未成功：(

有什么想法吗？

推荐答案

我尝试将锚嵌套在按钮内，但不起作用。Click事件始终在按钮级捕获。 我没有检查Bootstrap源代码以检查备选方案，但使用以下方法找到了一种方法来实现您的要求：将按钮和链接都作为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>

这篇关于防止Bootstrap 5手风琴折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！