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

Question

我默认打开第一个手风琴项目，所以我想做的就是随时至少打开一个（因此侧面的图片保持合适的纵横比）。默认情况下，我可以关闭所有这些，当我打开一个新的时，所有其他的都会关闭。

Answer 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();
        }
    })
);

Answer 2

var opened = true;
$('.accordion-collapse').on('show.bs.collapse', function() {
    opened = false;
});
$('.accordion-collapse').on('hide.bs.collapse', function() {
    if(opened)
        return false;
    opened = true;
});

Answer 3

我找到了适用于 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 开发人员，所以我知道这不是最优雅的解决方案，但至少它解决了我的问题。