如何在 Bootstrap 5 中保持一个手风琴项目始终打开？答案

【问题标题】：How to keep one accordion item always open in Bootstrap 5?如何在 Bootstrap 5 中保持一个手风琴项目始终打开？
【发布时间】：2022-02-12 19:56:17
【问题描述】：

我默认打开了第一个手风琴项目，所以我想做的是在任何时候都至少打开一个（所以侧面的图片保持不错的纵横比）。默认情况下，我可以关闭所有这些，当我打开一个新的时，所有其他的都会关闭。

【问题讨论】：

标签： javascript css bootstrap-5

【解决方案1】：

您需要为所有手风琴项目设置一个观察者并检查它们是否打开。

如果没有打开，则打开第一个。

$('#accordion-id .collapse').each((i, e) => 
    $(e).on('hidden.bs.collapse', () => {
        // check if an accordion item is expanded
        let isExpanded = false;
        $('#accordion-id [aria-expanded]').each((i, element) => {
            if ($(element).attr("aria-expanded") === 'true') {
                isExpanded = true;
            }
        });
    
        // show the first accordion item
        if (!isExpanded) {
            $('#btn-firs-accordion-id').click();
        }
    })
);

【讨论】：

【解决方案2】：

我找到了适用于 Bootstrap 4 版本的解决方案，但没有找到适用于 Bootstrap 5 的解决方案。

过了一会儿，我用这段代码解决了这个问题：

<script>
const accordions = document.querySelectorAll(".accordion-collapse");
let opening = false;
accordions.forEach(function (el) {
  el.addEventListener("hide.bs.collapse", (event) => {
    if (!opening) {
      event.preventDefault();
      event.stopPropagation();
    } else {
      opening = false;
    }
  });
  el.addEventListener("show.bs.collapse", (event) => {
    opening = true;
  });
});
</script>

我不是专业的 js 开发人员，所以我知道这不是最优雅的解决方案，但至少它解决了我的问题。

【讨论】：