防止在单击标题上的按钮时打开 Bootstrap 折叠面板

j2qf4p5b  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(2)|浏览(236)

我有两个动作按钮,它们位于 accordion 的顶部,如下所示:

当我单击其中一个按钮时,它会切换 accordion 的状态,我尝试了e.preventDefault()e.stopImmediatePropagation(),但没有结果
下面是jsfiddle:
https://jsfiddle.net/bxzhqsad/3/
请记住,我使用的是Bootstrap 5。

g0czyy6m

g0czyy6m1#

以下是解决此问题的方法:
折叠按钮具有以下数据属性

data-bs-collapse="collapse"

没有它, accordion 就不能工作。所以,我们可以用它作为一个技巧,当鼠标在我们自己的按钮上时,禁用 accordion 。
基本上就是说:
在按钮的***mouseenter***事件上,将折叠按钮data-bs-collapse设置为空字符串""
在按钮的***mouseleave***事件上,将折叠按钮data-bs-collapse设置回"collapse"
我假设您的按钮是collapse button/div的直接子按钮,因此下面是一些代码:

yourButton.addEventListener('mouseenter', (e) => {
  let accordionButton = yourButton.parentElement;
  accordionButton.setAttribute('data-bs-toggle', '');
});

yourButton.addEventListener('mouseleave', (e) => {
  let accordionButton = yourButton.parentElement;
  accordionButton.setAttribute('data-bs-toggle', 'collapse');
});

yourButton.addEventListener('click', (e) => {
  // do whatever you want...
});

希望这能有所帮助!

zzlelutf

zzlelutf2#

将元素嵌套在.accordion-button中将无法捕获内部元素的事件。实现此功能的一种方法是将内部按钮与.accordion-button分开,然后使用绝对定位实现视觉上相似的外观:

<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

相关问题