1

仅使用 Angular JS Animate 和 Css Animation，我正在尝试创建一个类似于此处看到的引导折叠的展开/折叠（手风琴）：http: //getbootstrap.com/javascript/#collapse

我对可扩展项目有疑问，它们会根据扩展的“显示”内容的高度来回弹出。查看我的 Plunker 以获得更多视觉效果

到目前为止我的工作：

var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);

expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
    $scope.active = true;
    $scope.active1 = true;    
});

http://plnkr.co/edit/wBYsFM?p=info

4

3 回答 3

9

您应该使用UI Bootstrap Accordion。这个组件是用纯 AngularJS 编写的。

于 2014-01-31T23:55:22.070 回答
1 
  <div class="list card benefit-listCard">
    <h3 class="accordion" ng-class="{active:accordion1}">
<a href ng-click="accordion1=!accordion1" style="padding:0px;"><div class="item item-avatar benefit-itemAvatar">
    <img src="img/aws.png" class="service-img">
    <h2>Amazon Web Services</h2>
    <button class="button button-small button-outline button-calm detail-button">Get Deals</button> <div 
  class="fa fa-fw list-arrow" ng-class="{'ion-minus-circled': accordion1, 'ion-plus-circled' : !accordion1}" style="float:right;color:#44c8f5;font-size:25px;margin-top:10px;">
  </div>
  </div>
</a>

Lorem Ipsum1

赛特斯支付

获取优惠 Lorem Ipsum2。

亚马逊网络服务

获得优惠 Lorem Ipsum 3

于 2017-04-21T06:53:05.440 回答
-5

jQuery UI 有类似的方法可以使用吗？

http://jqueryui.com/accordion/

于 2014-01-31T22:22:39.017 回答