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 =＆＃34; headingOne ， id =＆＃34; headingSecond ，因此每当您点击ID为 headingOne ，它将调用相同ID的相应块。

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

1 个答案: