1
展開されたアイテムの上にスクロールしたいBootstrap Accordionsをネストしました。問題は、拡張されたサブアイテムがDOMの上位に位置するため、実際に展開されているアイテムを特定できないという問題です。jQuery Bootstrapネストされたアコーディオン：親が閉じられたときに子アイテムを折りたたむ方法
私はこれを言及したすべての記事を検索しましたが、私のコードはそれらと非常に異なって見えます。
親が拡張されているために親が崩壊した場合、誰でも自動的にすべてのサブアイテムを閉じる手助けはできますか？
WORKINGバージョンで更新CODE：
$(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">
\t \t \t <div class="panel-group level2" id="accordion1" role="tablist" aria-multiselectable="true">
\t \t \t
\t \t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading" role="tab" id="heading1_1">
\t \t \t <h4 class="panel-title">
\t \t \t <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse1_1" aria-expanded="true" aria-controls="collapse1_1">
\t \t \t Item 1.1
\t \t \t </a>
\t \t \t </h4>
\t \t \t </div>
\t \t \t <div id="collapse1_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1_1">
\t \t \t <div class="panel-body">
\t \t \t \t Lorem ipsum ...
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading" role="tab" id="heading1_2">
\t \t \t <h4 class="panel-title">
\t \t \t <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse1_2" aria-expanded="true" aria-controls="collapse1_2">
\t \t \t Item 1.2
\t \t \t </a>
\t \t \t </h4>
\t \t \t </div>
\t \t \t <div id="collapse1_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1_2">
\t \t \t <div class="panel-body">
\t \t \t \t Lorem ipsum ...
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t </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">
\t \t \t <div class="panel-group level2" id="accordion2" role="tablist" aria-multiselectable="true">
\t \t \t
\t \t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading" role="tab" id="heading2_1">
\t \t \t <h4 class="panel-title">
\t \t \t <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2_1" aria-expanded="true" aria-controls="collapse2_1">
\t \t \t Item 1.1
\t \t \t </a>
\t \t \t </h4>
\t \t \t </div>
\t \t \t <div id="collapse2_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2_1">
\t \t \t <div class="panel-body">
\t \t \t \t Lorem ipsum ...
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading" role="tab" id="heading2_2">
\t \t \t <h4 class="panel-title">
\t \t \t <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2_2" aria-expanded="true" aria-controls="collapse2_2">
\t \t \t Item 1.2
\t \t \t </a>
\t \t \t </h4>
\t \t \t </div>
\t \t \t <div id="collapse2_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2_2">
\t \t \t <div class="panel-body">
\t \t \t \t Lorem ipsum ...
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t </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を展開 - ノートをスクロールの動作
- Expand Item 1.2 - 再び、スクローリングの動作
- 今すぐアイテム2を展開します。アイテム1.2は、今すぐ折りたたまれたアイテム1内で展開されるので、スクロールされているアイテム1です。それは
hiddenイベントを処理するのと同じくらい簡単である必要があり、事前に
おかげで、 ジャスティン
おかげ - それは非常に便利です。私はそれを試みましたが、.panel-collapseの代わりに.panel-groupを使用していました。あなたの正確なコードは私の実際のサイトで奇妙な動作を引き起こしましたが、最後の行でfind（ '。collapse.in'）を使って修正しました。ありがとう！ – JustinXyn