Question

使用Angular JS Animate和Css Animation，我试图创建一个类似于此处所见的引导崩溃的展开/折叠（手风琴）：http://getbootstrap.com/javascript/#collapse

我对可扩展项目有疑问，它们会根据展开的“show”内容的高度来回弹出。请参阅我的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

Answer 1

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

Answer 2

  <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

Cytrus Pay

获得优惠 Lorem Ipsum2。

亚马逊网络服务

获得优惠 Lorem Ipsum 3

Answer 3

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

http://jqueryui.com/accordion/

使用AngularJS和CSS动画的手风琴

3 个答案:

Cytrus Pay

亚马逊网络服务