我默认打开了第一个 accordion 项目,所以我想做的是在任何时候都至少打开一个(所以侧面的图片保持一个体面的长宽比)。默认情况下,我可以关闭所有这些项目,当我打开一个新项目时,所有其他项目都会关闭。
的数据
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(); } }) );
字符串
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; });
hts6caw33#
你只需要从accordion按钮中删除collapsed类。然后在accordion主体的父级中添加collapse show类,以始终显示accordion项目。你可以按照这个例子。我在这里打开了第一个项目。
collapsed
collapse show
<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>
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,所以我知道这不是最优雅的解决方案,但至少它解决了我的问题。
4条答案
按热度按时间biswetbf1#
您需要在所有 accordion 项目上设置一个监视器,并检查其中是否有任何项目处于打开状态。
如果没有打开,打开第一个。
字符串
ubof19bj2#
字符串
hts6caw33#
你只需要从accordion按钮中删除
collapsed
类。然后在accordion主体的父级中添加collapse show
类,以始终显示accordion项目。你可以按照这个例子。我在这里打开了第一个项目。字符串
k4aesqcs4#
我找到了Bootstrap 4版本的解决方案,但没有Bootstrap 5。
过了一段时间,我可以用这段代码解决这个问题:
字符串
我不是一个js开发Maven,所以我知道这不是最优雅的解决方案,但至少它解决了我的问题。