嵌套的 ui.bootstrap.accordion 打开所有嵌套的手风琴

Question

我作为会员的第一个问题！我有 2 个嵌套的 ui.bootstrap.accordion。问题是当我单击嵌套手风琴的一个标题时，整个嵌套手风琴就会打开。

这里是 HTML

<uib-accordion close-others="true">
    <uib-accordion-group is-open="status.open" panel-class="panel-sector" class="panel-nopadding col-xs-12 col-sm-6" ng-repeat="FAQ in FAQItems">
        <uib-accordion-heading>
            <div class="panel-leg square">
                <i class="pull-right fa" ng-class="{'fa-chevron-down': status.open, 'fa-chevron-right': !status.open}"></i><h3 class="">{{FAQ.CategoryDescription}}</h3>
            </div>
        </uib-accordion-heading>
        <uib-accordion close-others="false">
            <uib-accordion-group is-open="status.openNest" class="panel-nopadding" ng-repeat="Subcategory in FAQ.Subcategories">
                <uib-accordion-heading>
                    <div>
                        <i class="pull-right fa" ng-class="{'fa-chevron-down': status.openNest, 'fa-chevron-right': !status.openNest}"></i>
                        <h4 class="panel-title">{{Subcategory.SubcategoryDescription}}</h4>
                    </div>
                </uib-accordion-heading>
                <div class="panel-nopadding" ng-repeat="Pair in Subcategory.Pairs">
                    <h3>{{Pair.Question}}</h3>
                </div>
            </uib-accordion-group>
        </uib-accordion>
    </uib-accordion-group>
</uib-accordion>

Answer 1

通过以下代码供参考：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
      First One
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Second One
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Third One
      </div>
    </div>
  </div>
</div>

您必须更改 id id="headingOne, id="headingSecond 所以每当您点击第一个 id 为 headingOne 的标签时，它将调用相同ID的相应块。