css 如何在Bootstrap 5中保持一个 accordion 项目始终打开?

46qrfjad  于 4个月前  发布在  Bootstrap
关注(0)|答案(4)|浏览(95)

我默认打开了第一个 accordion 项目,所以我想做的是在任何时候都至少打开一个(所以侧面的图片保持一个体面的长宽比)。默认情况下,我可以关闭所有这些项目,当我打开一个新项目时,所有其他项目都会关闭。


的数据

biswetbf

biswetbf1#

您需要在所有 accordion 项目上设置一个监视器,并检查其中是否有任何项目处于打开状态。
如果没有打开,打开第一个。

$('#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();
        }
    })
);

字符串

ubof19bj

ubof19bj2#

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

字符串

hts6caw3

hts6caw33#

你只需要从accordion按钮中删除collapsed类。然后在accordion主体的父级中添加collapse show类,以始终显示accordion项目。你可以按照这个例子。我在这里打开了第一个项目。

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
        aria-expanded="true" aria-controls="collapseOne">
        Accordion Item 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
      data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Content for Accordion Item 1
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
        aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
      data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Content for Accordion Item 2
      </div>
    </div>
  </div>
</div>

字符串

k4aesqcs

k4aesqcs4#

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

相关问题