jQuery Bootstrap嵌套手风琴：当父项关闭时如何折叠子项答案

【问题标题】：jQuery Bootstrap Nested Accordions: How to collapse child items when parent is closedjQuery Bootstrap嵌套手风琴：当父项关闭时如何折叠子项
【发布时间】：2016-07-16 05:51:12
【问题描述】：

我已经嵌套了 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>&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>

查看附件代码以复制问题：

展开第 1 项，然后展开第 2 项，再展开第 1 项 - 笔记滚动有效
展开第 1.2 项 - 再次，滚动工作
现在展开第 2 项 - 因为第 1.2 项在现在折叠的第 1 项中展开，所以滚动到第 1 项。

提前致谢，贾斯汀

【问题讨论】：

标签： jquery twitter-bootstrap-3 nested accordion

【解决方案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

【讨论】：

谢谢 - 这很有帮助。我曾尝试过，但使用的是 .panel-group 而不是 .panel-collapse。您的确切代码在我的实际站点中引起了一些奇怪的行为，但在最后一行中使用 find('.collapse.in') 修复了它。谢谢！