Question

我发现这种手风琴效果效果非常好：http://angular-ui.github.io/bootstrap/

但是我需要手风琴以不同的方式打开，以便每个手风琴组的内容出现在打开它的手风琴标题之上。只是想知道是否有人知道一个简单的方法来完成这个或者我是否必须自己制作定制手风琴。

Answer 1

UIBootstrap手风琴不支持默认情况下将面板内容置于标题上方。

以下是accordion-group.html模板，它是每个面板的HTML。如您所见，目前没有逻辑可以涵盖您的用例。

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
    </h4>
  </div>
  <div class="panel-collapse" collapse="!isOpen">
      <div class="panel-body" ng-transclude></div>
  </div>
</div>

https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html

但是，修改此文件以使标题低于内容应该相当简单。只需更改此模板即可按您喜欢的顺序设置divs。

<div class="panel panel-default">
  <div class="panel-collapse" collapse="!isOpen">
      <div class="panel-body" ng-transclude></div>
  </div>
  <div class="panel-heading">
    <h4 class="panel-title">
      <a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
    </h4>
  </div>
</div>

我建议在GitHub上使用存储库的一个分支，这样您就可以进行更改而不会失去版本控制的好处。 http://github.com/angular-ui/bootstrap

Angularjs ui.bootstrap手风琴

1 个答案: