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。

有没有办法避免手风琴的角度和折叠效果相同？

1 个答案: