Bootstrap 5 accordion活动元素禁用折叠没有jQuery

Question

有一个Bootstrap 5 Accordion元素:

<div id="accordion-1" class="accordion" role="tablist">
<div class="accordion-item">
<h2 class="accordion-header" role="tab"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1">Accordion Item</button></h2>
<div class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordion-1">
<div class="accordion-body">
<p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-2" aria-expanded="false" aria-controls="accordion-1 .item-2">Accordion Item</button></h2>
<div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordion-1">
<div class="accordion-body">
<p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-3" aria-expanded="false" aria-controls="accordion-1 .item-3">Accordion Item</button></h2>
<div class="accordion-collapse collapse item-3" role="tabpanel" data-bs-parent="#accordion-1">
<div class="accordion-body">
<p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>

我想知道如何禁用活动手风琴元素，即折叠是禁用的。jQuery有一个解决方案:

$('#accordion-1').on('show.bs.collapse', function() {
$(this).collapse('hide');
});
$('.accordion-button').on('click', function() {
$('.accordion-button').each(function() {
$(this).removeAttr('disabled');
});

$(this).attr('disabled', 'disabled');
});

，这是我们自己在JavaScript中的解决方案(但不起作用):

Array.from(document.getElementsByClassName("accordion-button")).forEach(function(element) {
element.addEventListener('click', function() {
if (element.disabled) {
element.removeAttribute('disabled');
} else {
element.setAttribute('disabled','disabled');
}
}); 
});

你能帮我如何重写工作jQuery代码成JavaScript代码?提前感谢您的帮助!

Answer 1

jQuery等效

等效的JavaScript代码如下所示。

当打开时禁用手风琴开关，使用引导事件show.bs.collapse。或者，要在切换按钮关闭后禁用它，请使用hide.bs.collapse事件。您只需要更改事件名称，因为不需要更改其他代码。

两个事件都由手风琴面板发出。因此，我们需要使用.close()首先找到父手风琴项，然后禁用其中的切换按钮。

accordion.addEventListener('hide.bs.collapse', function(e) {
// enable all toggle buttons
this.querySelectorAll('.accordion-button[disabled]')
.forEach(button => button.disabled = false );
// disable current button on accordion hide
e.target.closest('.accordion-item')
?.querySelector('.accordion-button')
?.setAttribute('disabled', true);

});

评论>这也可以使用切换按钮单击事件来完成，但方式与问题中显示的代码不同。但是，这里没有给出这个替代方案。

检查并运行代码片段，以了解它是如何工作的。

/*
$('#accordion-1').on('show.bs.collapse', function() {
$(this).collapse('hide');
});
$('.accordion-button').on('click', function() {
$('.accordion-button').each(function() {
$(this).removeAttr('disabled');
});

$(this).attr('disabled', 'disabled');
});
*/

let accordion = document.getElementById('accordion-1');

accordion.addEventListener('show.bs.collapse', function(e) {
// enable all toggle buttons
this.querySelectorAll('.accordion-button[disabled]')
.forEach(button => button.disabled = false );
// disable current button on accordion hide
e.target.closest('.accordion-item')
?.querySelector('.accordion-button')
?.setAttribute('disabled', true);

});

/* for debugging only */
.accordion-button[disabled]:before {
content: '(disabled) ';
color: red !important;
}

<div id="accordion-1" class="accordion" role="tablist">
<div class="accordion-item">
<h2 class="accordion-header" role="tab"><button class="accordion-button" type="button" disabled data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1">Accordion Item</button></h2>
<div class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordion-1">
<div class="accordion-body">
<p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-2" aria-expanded="false" aria-controls="accordion-1 .item-2">Accordion Item</button></h2>
<div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordion-1">
<div class="accordion-body">
<p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-3" aria-expanded="false" aria-controls="accordion-1 .item-3">Accordion Item</button></h2>
<div class="accordion-collapse collapse item-3" role="tabpanel" data-bs-parent="#accordion-1">
<div class="accordion-body">
<p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>
<!--
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
-->
<!-- Bootstrap 5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>