防止在单击标题上的按钮时打开引导手风琴
我有两个操作按钮,它们位于手风琴的标题上,如下所示:
当我单击其中一个按钮时,它会切换手风琴的状态,我尝试了e.preventDefault()
和e.stopImmediatePropagation()
,但没有结果
这是jsfiddle:
https://jsfiddle.net/bxzhqsad/3/
请记住,我使用的是Bootstrap 5。
解决方案
在.accordion按钮内嵌套元素不允许捕获内部元素事件。实现此功能的一种方法是将内部按钮与.accordion按钮分开,然后使用绝对定位实现视觉上相似的外观:
<h2 class="accordion-header" id="flush-heading-1">
<div class="d-flex">
<button type="button" class="accordion-button collapsed text-start" data-bs-toggle="collapse" data-bs-target="#item_1" aria-expanded="true" aria-controls="#item_1">
<h5 class="content_title fw-bold w-100 text-left">Title 1</h5>
</button>
<div class="d-flex align-items-start position-fixed" style="right:100px; z-index:1000;">
<span class="fa fa-pencil-alt cercle-icons edit-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
<span class="far fa-trash-alt cercle-icons delete-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
</div>
</div>
</h2>
请参阅the modified fiddle
相关文章