我有一个类似这样的Bootstrap 5手风琴:
<div class="accordion" id="my_accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_bar">
<button class="accordion-button collapsed bg-light my-collapse" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_bar" aria-expanded="false" aria-controls="collapse_bar">Bar</button>
</h2>
<div id="collapse_bar" class="accordion-collapse collapse" aria-labelledby="heading_bar" data-bs-parent="#my_accordion">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>
我正在尝试监听 shown
和 hidden
事件,如折叠面板文档中所述:在折叠面板文档中:
return $('button.my-collapse[data-bs-toggle="collapse"]').on('shown.bs.collapse', function(e) {
console.log("This is not fired...")
});
但是出于某种原因,事件没有被触发。我知道选择器是正确的,因为如果我将shown.bs.collapse
更改为click
事件会被触发。
有任何想法是怎么回事吗?
顺便说一句,我的逻辑似乎也适用于像这样的选项卡:
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="debug_tab" role="tablist">
<li class="nav-item"><a class="nav-link my-tab" id="products-tab" data-bs-toggle="tab" href="#foo" role="tab" aria-controls="foo" aria-selected="false">Foo</a></li>
</ul>
</div>
<div class="card-body">
...
</div>
</div>
当我像这样听的时候:
return $('a.my-tab[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
console.log("This is fired...")
});