Javascript 防止引导5手风琴折叠

我用的是Bootstrap5的手风琴组件。好消息：它工作得非常好

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

    <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进行调整，使其在视觉上保持在同一“行”

手风琴项目#1

你有JS代码吗？@Zim你是说Bootstrap的JS代码吗？没有。你的JS代码我没有更多的JS。我所尝试的只是在我的链接onclick=“e.stopPropagation（）；window.open（'myurl'，'u self'）；中添加。但是没有成功。谢谢。我想这可能会奏效。这可能是“静态”的完美解决方案内容，但我链接中的内容在每个手风琴项目中都会发生变化，并且根据屏幕的大小，我可能会跳行。因此，我必须添加更多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>