如何在 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

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