我已经嵌套了 Bootstrap Accordions，我想滚动到展开项目的顶部。问题是，在 DOM 中向上展开的子项会导致定位实际正在展开的项时出现问题。
我搜索了所有提到这一点的帖子，但我的代码看起来与那些非常不同，我无法让它工作。
如果一个父项由于另一个父项展开而折叠，任何人都可以帮助我自动关闭所有子项吗？
使用工作版本更新代码:
$(function () {
$('.panel-group').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -6
}, 500);
e.stopPropagation();
}
});
$('.panel-collapse').on('hidden.bs.collapse', function () {
// find the children and close them
$(this).find('.collapse.in').collapse('hide');
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p> </p>
<p> </p>
<div class="panel-group level1" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
Item 1
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<div class="panel-group level2" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1_1">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse1_1" aria-expanded="true" aria-controls="collapse1_1">
Item 1.1
</a>
</h4>
</div>
<div id="collapse1_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1_1">
<div class="panel-body">
Lorem ipsum ...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1_2">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse1_2" aria-expanded="true" aria-controls="collapse1_2">
Item 1.2
</a>
</h4>
</div>
<div id="collapse1_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1_2">
<div class="panel-body">
Lorem ipsum ...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
Item 2
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<div class="panel-group level2" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2_1">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2_1" aria-expanded="true" aria-controls="collapse2_1">
Item 1.1
</a>
</h4>
</div>
<div id="collapse2_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2_1">
<div class="panel-body">
Lorem ipsum ...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2_2">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2_2" aria-expanded="true" aria-controls="collapse2_2">
Item 1.2
</a>
</h4>
</div>
<div id="collapse2_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2_2">
<div class="panel-body">
Lorem ipsum ...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>请参阅随附的代码来复制问题:
- 展开项目 1，然后展开项目 2，然后再次展开项目 1 - 注意滚动有效
- 展开第 1.2 项 - 再次，滚动有效
- 现在展开项目 2 - 因为项目 1.2 在现已折叠的项目 1 内展开，所以滚动到的是项目 1。
提前致谢， 贾斯汀
最佳答案
Bootstrap 5(2023 年更新)
jQuery 不再是 Bootstrap 5 的原生功能，因此普通 JS 将实现相同的功能来关闭子项...
const myCollapsible = document.getElementById('module-test')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
// close children
event.target.querySelectorAll('.collapse').forEach(element => {
const bc = bootstrap.Collapse.getOrCreateInstance(element)
bc.hide()
})
})
https://codeply.com/p/mJYXqUDGm6
<小时/>Bootstrap 3(原始答案)
它应该像处理隐藏事件一样简单..
$('.panel-collapse').on('hidden.bs.collapse', function () {
// find the children and close them
$(this).find('.collapse').collapse('hide');
});
Bootstrap 3:https://codeply.com/p/MGamArJJ7I
关于jQuery Bootstrap 嵌套 Accordion : How to collapse child items when parent is closed，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36271346/