Question

我想创建一个多级可折叠面板。在演示中如果我单击父可折叠面板，它将打开所有内部可折叠面板，反之亦然。

我的要求是使用具有相同代码流的子可折叠面板的可折叠面板。如果我点击父可折叠标题，那么它应该打开并显示其内容而不打开子可折叠面板。等等，如果我点击内部可折叠标题，那么它应该只打开或关闭它自己没有发生的内容。

如果有人知道，请尽快为此建议解决方案。

[<

!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">

    <uib-accordion-group is-open="status.open">
      <uib-accordion-heading>
       heading 1 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      content 1
       <uib-accordion-group is-open="status.open">
      <uib-accordion-heading>
       inner panel heading 1 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      inner panel content 1
    </uib-accordion-group>
    </uib-accordion-group>
  </uib-accordion>
</div>
  </body>
</html>

Plunker Collapsible Demo

我试图从父母和孩子那里删除属性[is-open =“status.open”]，这使得手风琴正在工作，但是字形图标没有切换。

我想通过图标正常工作来实现这一要求......

Answer 1

尝试使用此代码替换plunkr中的子元素

      content 1
       <uib-accordion-group is-open="status.openChild">
      <uib-accordion-heading>
       inner panel heading 1 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.openChild, 'glyphicon-chevron-right': !status.openChild}"></i>
      </uib-accordion-heading>
      inner panel content 1
    </uib-accordion-group>

基于角度的可折叠面板演示，我想在其中创建嵌套的可折叠面板

1 个答案: