Bootstrap 5 : Event stopPropagation() or stopImmediatePropag

Question

我正试图在我的相应标题中应用一个带有点击事件的span标记

但是，

我不想展示或崩溃我的根据。

所以我使用了stopPropagation((和stopImmediatePropagation(，但它们都不起作用。

以下是复制该问题的工作示例-https://jsfiddle.net/9pL40roz/1/

window.foo = function(e) {
e.stopPropagation();
console.log('test')
}

我想实现下面链接中提到的东西

https://stackoverflow.com/a/24469635

Answer 1

您必须应用以下步骤

1. 为所有手风琴式页眉添加相对位置(Bootstrap类(
2. 为所有选项按钮添加位置绝对top 50 start-50 translate middle(Bootstrap类(，然后使用z-index(.btn-up(处理

.btn-up{
z-index:2000 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header position-relative" id="headingOne">
<button  type="button" onclick="alert(this.innerText)" class="btn-up btn-sm btn-primary position-absolute top-50 start-50 translate-middle">Options 1</button>
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header position-relative" id="headingTwo">
<button  type="button" onclick="alert(this.innerText)" class="btn-up btn-sm btn-primary position-absolute top-50 start-50 translate-middle">Options 2</button>
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header position-relative" id="headingThree">
<button  type="button" onclick="alert(this.innerText)" class="btn-up btn-sm btn-primary position-absolute top-50 start-50 translate-middle">Options 3</button>
<button class="accordion-button collapsed " type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>