jQuery Bootstrap嵌套式Accordions：如何在父级关闭时折叠子项

Question

我已经嵌套了Bootstrap Accordions，我想滚动到展开项目的顶部。问题是，DOM中更高的子项目更高，导致找到实际扩展的项目时出现问题。

我已经搜索了所有提及此内容的帖子，但我的代码看起来与那些代码截然不同，我无法使其正常工作。

如果父母由于另一位父母被扩展而崩溃，任何人都可以帮我自动关闭所有子项吗？

更新后的代码与工作版本：

＆＃13;

＆＃13;

$(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');
  });

});

＆＃13;

<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>&nbsp;</p>
<p>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

＆＃13;

＆＃13;

＆＃13;

请参阅附件代码以复制问题：

1. 展开项目1，然后展开项目2，然后再展开项目1 - 注意滚动工作
2. 展开项目1.2 - 再次，滚动工作
3. 现在展开第2项 - 因为项目1.2在现在折叠的第1项中展开，它正在滚动到的第1项。

提前致谢， 贾斯汀

Answer 1

它应该像处理hidden事件一样简单..

$('.panel-collapse').on('hidden.bs.collapse', function () {
  // find the children and close them
  $(this).find('.collapse').collapse('hide');
});

http://www.bootply.com/tjClUFrX8p