有没有办法避免 angular 中的手风琴并具有与崩溃相同的效果？

Question

我正在使用 uib-collapse，效果很好！我只是希望我能控制我没有超过一个打开 div，而且手风琴似乎是要走的路。

但是，我发现在 uib-accordion 上应用样式非常困难。

有没有办法仅使用 uib-collapse 来应用相同的效果？

Answer 1

是的，您可以，只需使用数组管理折叠状态。请记住 uib-collapse 属性控制元素是否折叠。所以你的标记看起来像：

<button type="button" class="btn btn-default" ng-click="collapseToggle(0)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[0]">
    <div class="well well-lg">Some content</div>
</div>
<br />
<button type="button" class="btn btn-default" ng-click="collapseToggle(1)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[1]">
    <div class="well well-lg">Some content</div>
</div>
<br />
<button type="button" class="btn btn-default" ng-click="collapseToggle(2)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[2]">
    <div class="well well-lg">Some content</div>
</div>

和控制器位：

$scope.isCollapsed = [];

$scope.collapseToggle = function(id) {
  // if toggeling the same collapse
  // just close it.
  if ($scope.isCollapsed[id]) {
    $scope.isCollapsed.length = 0;
    return;
  }
  $scope.isCollapsed.length = 0;
  $scope.isCollapsed[id] = true;
}

这里 plunk 展示了这种方法。

有没有办法避免 angular 中的手风琴并具有与崩溃相同的效果？

Is there a way to avoid accordion in angular and have the same effects with collapse?

angularjs

angular-ui-bootstrap