Question

如果你去https://material.angularjs.org网站，你会注意到sidenav中的一个非常好的Accordion下拉菜单。

我试图找到此功能的简化版本。我看过许多例子，看起来很多例子都不再有用了。

我不需要它复杂化。所以不需要重复的物品。我可以做到这一切。我需要基本的功能。

根据我所研究的内容，他们开发了一个expando功能，但在那之前是否有解决方法？

更新：

我无法找到一个好的角度材料设计，但我能找到一个角度方法。

https://github.com/sherwaniusman/angular-accordion

Answer 1

以下小提琴真的帮助了我： Accordion example

我还添加了允许一次只扩展1个菜单的功能，如果其他菜单打开，它将自动关闭它们。

控制器中的代码：

function controller($scope) {


     $scope.accordianData = [  
                                { "heading" : "About Us",         "content" : "" },
                                { "heading" : "Terms of Use",     "content" : "" },
                                { "heading" : "Privacy Policy",   "content" : "" },
                                { "heading" : "Help",             "content" : "" },
                             ];
      );
      // To expand or collapse the current view
      //This functionality automatically closes the other expanded lists
      $scope.toggleView = function(ary, data, index){
        for(var i=0; i<ary.length; i++){
          if(i!=index) { ary[i].expanded=false; }
          else { data.expanded=!data.expanded; }
        }
      }
  }

并且view / html代码是：
根据我的要求调整了一些功能：

<md-content id="dynamic-content" class="f-clear-padding">
      <div class="md-accordion" ng-repeat="data in accordianData">
        <!-- <md-toolbar ng-init="data.expanded = false" ng-click="data.expanded = !data.expanded"> this was the code in demo-->
        <md-toolbar ng-init="data.expanded = false" ng-click="toggleView(accordianData, data, $index)">
        <div class="md-toolbar-tools">
          <!-- <h2> -->
          <div ng-bind="data.heading"></div>
          <!-- </h2> -->
        <div flex=""></div>
        <div ng-class="{expandCollapse:true, active:data.expanded}"></div>
        </div>
        </md-toolbar>
        <div style="overflow:scroll" ng-class="{dataContent:true, activeContent:data.expanded}">
          <div style="padding:10px" ng-bind-html="data.content"></div>
        </div>
      <div>
    </md-content>

和css部分：

.md-accordion .expandCollapse { width:30px; height:30px; position:relative; font-size:20px; font-weight:bold; cursor:pointer; color:#fff; display:block; margin-top: -2px; margin-left: -2px; overflow:hidden; } 
.md-accordion .expandCollapse:active { border:0px; }
.md-accordion .expandCollapse:before, .md-accordion .expandCollapse:after { width:30px; height:30px; display:block; position:absolute; top:0; left:0; line-height:32px; text-align:center; -webkit-transition: .3s all ease-out; transition: .3s all ease-out; }
.md-accordion .expandCollapse:before { opacity:1 -webkit-transform: rotate(0deg); transform: rotate(0deg); content: "|"; margin-top:-3px; }
.md-accordion .expandCollapse:after { opacity:1; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); content: "|"; margin-left:-3px; }
.md-accordion .active:before { opacity:1; -webkit-transform: rotate(90deg); transform: rotate(90deg); margin-left:3px; margin-top:0px; }
.md-accordion .dataContent { background: #F2F2F2; height:0px; overflow:hidden; -webkit-transition: .3s all ease-out; transition: .3s all ease-out; }
.md-accordion .activeContent { height:60vh; padding:0; display:block; }
.md-accordion md-toolbar{ cursor:pointer; border-bottom:1px solid rgb(63,107,181) }

这里我们已经修复了可扩展列表的高度以保持列表项仍然可见，否则一旦展开具有大量内容的div，用户可能会觉得它是唯一可用的列表项，可能无法如果扩展了任何div，则查看其他项目，overflow:scroll允许视图滚动，否则它将变得僵硬，用户将无法查看整个内容。

希望这有用......：）

Answer 2

所以这就是我最终使用的

指令HTML代码

需要向右和向下箭头img

<ang-accordion one-at-a-time="true" icon-position="right" close-icon-url="<?php echo URL; ?>/img/icons/right-icon.png" open-icon-url="<?php echo URL; ?>/img/icons/down-icon.png">                                           
  <collapsible-item ng-repeat="item in items" item-title=""  initially-open="">                            

     <div>Text</div>

  </collapsible-item>             
</ang-accordion>

要包含的脚本

<script type="text/javascript" src="<?php echo URL; ?>/js/angular/controllers/accordion.js"></script>

JS：accordion.js

app.controller('angAccordionController', ['$scope', function($scope){
    var collapsibleItems = [];

      this.openCollapsibleItem = function(collapsibleItemToOpen) {
        if( $scope.oneAtATime ) {
          angular.forEach(collapsibleItems, function(collapsibleItem) {
            collapsibleItem.isOpenned = false;
            collapsibleItem.icon = collapsibleItem.closeIcon;
          });
        }
        collapsibleItemToOpen.isOpenned = true;
      };

      this.addCollapsibleItem = function(collapsibleItem) {
        collapsibleItems.push(collapsibleItem);

        if ( $scope.closeIconClass !== undefined || $scope.openIconClass !== undefined ) {
          collapsibleItem.iconsType = 'class';
          collapsibleItem.closeIcon = $scope.closeIconClass;
          collapsibleItem.openIcon = $scope.openIconClass;
        }
        else if ( $scope.closeIconUrl !== undefined || $scope.openIconUrl !== undefined ) {
          collapsibleItem.iconsType = 'url';
          collapsibleItem.closeIcon = $scope.closeIconUrl;
          collapsibleItem.openIcon = $scope.openIconUrl;
        }

        collapsibleItem.iconIsOnLeft = $scope.iconPosition == 'left' ? true: false;
      };

  }])
  .directive('angAccordion', function() {
  return {
    restrict: 'EA',
    transclude: true,
    replace: true,
    scope: {
      oneAtATime: '@',
      closeIconUrl: '@',
      openIconUrl: '@',
      closeIconClass: '@',
      openIconClass: '@',
      iconPosition: '@' 
    },
    controller: 'angAccordionController',
    template: '<div class="accordion" ng-transclude></div>'
  };
});

angular.module('collapsibleItem', []).directive('collapsibleItem', function() {
  return {
    require: '^angAccordion',
    restrict: 'EA',
    transclude: true,
    replace: true,
    scope: {
      itemTitle: '@',
      itemDisabled: '=',
      initiallyOpen: '@'
    },
    link: function(scope, element, attrs, accordionController) {

      scope.isOpenned = (scope.initiallyOpen == "true") ? true : false;
      accordionController.addCollapsibleItem(scope);

      if(scope.isOpenned)
        scope.icon = scope.openIcon;
      else
        scope.icon = scope.closeIcon;

      scope.toggleCollapsibleItem = function () {

        if(scope.itemDisabled)
          return;

        if(!scope.isOpenned) {
          accordionController.openCollapsibleItem(this);
          scope.icon = scope.openIcon;
        }
        else {
          scope.isOpenned = false;
          scope.icon = scope.closeIcon;
        }
      };

      scope.getIconUrl = function ( type ) {
        return type == 'url' ? scope.icon : null;
      };
    },
    template: '<div class="collapsible-item" ng-class="{open: isOpenned}"><div class="title" ng-class="{disabled: itemDisabled}" ng-click="toggleCollapsibleItem()">{{itemTitle | limitTo:28 }}<i ng-show="iconsType == \'class\'" class="{{icon}} icon" ng-class="{iconleft: iconIsOnLeft}"></i><img ng-show="iconsType == \'url\'" class="icon" ng-class="{iconleft: iconIsOnLeft}" ng-src="{{getIconUrl(iconsType)}}" /></div><div class="body"><div class="content" ng-transclude></div></div></div>'
  };
});

<强> CSS

.collapsible-item {
  margin-bottom: 0px;
}

.collapsible-item .title {
  padding: 10px;
  background-color: #dfdfdf;
  border: 0px solid #ccc;
  cursor: pointer;
}

.collapsible-item .title .icon {
  float: right;
  height: 20px;
  width: 20px;
  font-size: 19px !important;
  padding-right: 1px;
}

.collapsible-item .title .iconleft {
  float: left !important;
}

.collapsible-item .title.disabled {
  background: #eee;
  color: #999;
  cursor: text;
}

.collapsible-item .body {
  position: relative;
  top: -4px;
  max-height: 0;
  overflow: hidden;
  border: 1px solid #ccc;
  border-top: 0;
  z-index: -1;
  -webkit-transition: max-height 0.5s ease;
     -moz-transition: max-height 0.5s ease;
       -o-transition: max-height 0.5s ease;
          transition: max-height 0.5s ease;
}

.collapsible-item .body .content {
  padding: 5px 15px 5px 15px;
}

.collapsible-item.open .body {
  max-height: 1000px;
  z-index: 1;
}

如何在Angular Material中创建手风琴下拉菜单？

2 个答案: