Question

我正在构建一个可折叠的下拉垂直菜单，除了一个让我不知所措之外，我已经掌握了大部分功能。也就是说，旋转图标使其在打开时显示，在关闭时指向下方。

我有CodePen你可以使用。我已经更新了下面的代码，以显示最接近解决方案的更改。

这是我的HTML

<div class="cnt">
    <div class="menu-item" ng-click="toggle(1); open1=!open1">
        <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
            <span class="title flex" flex=""> Menu Item</span>
            <i class="fa fa-chevron-down" ng-class="{'fa fa-chevron-down rotate180': open1, 'fa fa-chevron-down': !open1}"></i>
        </md-list>
        <div class="sub-menu" ng-animate="'animate'" >
            <md-menu-item ng-if="menuIsOpen===1" ng-repeat="item in data"  >
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </div>
    </div>
    <div class="menu-item" ng-click="toggle(2); open2=!open2">
        <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
            <span class="title flex" flex=""> Menu Item 2</span>
            <i class="fa fa-chevron-down" ng-class="{'fa fa-chevron-down rotate180': open2, 'fa fa-chevron-down': !open2}"></i>
        </md-list>
        <div class="sub-menu" ng-animate="'animate'" >
            <md-menu-item ng-if="menuIsOpen===2" ng-repeat="item in data2">
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </div>
    </div>
</div>

这就是我控制器内部的内容。切换功能是锻炼，我想，将图标旋转附加到此功能可能是一个好主意，以便它们一起工作。但我很难搞清楚它。我得到的最接近的是下面的这个功能。但它会在同一次点击中更改所有图标

$scope.open1 = false; //initial value
$scope.open2 = false; //initial value

$scope.toggle = function(itemPos) {
    if ($scope.menuIsOpen === itemPos) {
        $scope.menuIsOpen = 0;
    }
    else {
        $scope.menuIsOpen = itemPos;
    }
}

AngularJS或JavaScript解决方案都可以。我更喜欢AngularJS。请不要使用Bootstrap建议。这是一个Angular Material应用程序。它不使用Bootstrap。再次感谢！

Answer 1

如果您需要为菜单图标的打开和关闭设置动画，您还可以应用2个具有不同CSS转换属性的不同CSS类。

使用两个表达式相应地使用ng-class：

<强> HTML

ng-class="{'fa fa-chevron-down rotate180': open1, 'fa fa-chevron-down rotate-back': !open1}"

CSS CLASSES

.rotate180 {
    display: inline-block;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all linear 200ms;
    transition: all linear 200ms;
}

.rotate-back {
    display: inline-block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all linear 200ms;
    transition: all linear 200ms;
}

<强> CODEPEN

http://codepen.io/alexincarnati/pen/zNEPoW

Answer 2

添加名为opened的$ scope变量并将其设置为0。

根据点击的菜单切换ng-click中的值... open = 1;

并将其与你的ng-class一起使用：

<i ng-class="{'fa fa-chevron-up': opened===1, 'fa fa-chevron-down': opened!==1}"></i>

您可以使用不同的数字为每个菜单执行此操作，以识别它，1,2,3 ......

使用角度ng单击旋转图标

2 个答案: