防止 Bootstrap 5 Accordion 崩潰

Question

我正在使用 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() ，但沒有成功：(

任何想法？

Answer 1

我嘗試將錨點嵌套在按鈕內，但它不起作用。 單擊事件始終在按鈕級別捕獲。 我沒有檢查引導程序源代碼來檢查替代方案，但找到了一種使用以下方法實現您所要求的方法：將按鈕和鏈接都作為 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>