Question

我有一个简单的下拉菜单，我想调整一下。我需要帮助设置下拉菜单的动画，以便在打开时缩小。但这不是我最关心的问题。我真正需要帮助的是一次只打开一个下拉列表。因此，如果我打开一个，另一个先前已经打开，它应该关闭。

我正在使用Angular-Material，所以我正在寻找一个Angular Controller或指令解决方案，也许使用ngHide / ngShow指令？不确定那部分。

这是我的HTML

    <md-list ng-click="menuIsOpen = !menuIsOpen" 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"></i>
    </md-list>
    <div class="sub-menu">
        <ul ng-init="menuIsOpen= false" ng-show="menuIsOpen">
            <md-menu-item 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>
        </ul>
    </div>

    <md-list ng-click="menu2IsOpen = !menu2IsOpen" 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"></i>
    </md-list>
    <div class="sub-menu">
        <ul ng-init="menu2IsOpen= false" ng-show="menu2IsOpen">
            <md-menu-item 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>
        </ul>
    </div>

我有CODEPEN你可以结帐。非常感谢！

Answer 1

在ng-click中，将变量menuIsOpen设置为ng-click="menuIsOpen = 1"，将ng-show="menuIsOpen === 1 "设置为与其他菜单相同。

示例

＆＃13;
＆＃13;
var app = angular.module("app", []); app.controller("ctrl", function($scope) { });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <button ng-click="menuIsOpen = 1">About Page</button> <button ng-click="menuIsOpen = 2">Help page</button> <button ng-click="menuIsOpen = 3">Info Page</button> <button ng-click="menuIsOpen = 4">Refrence page</button> <div class="form-group" ng-show="menuIsOpen===1"> <p>About page</p> </div> <div class="form-group" ng-show="menuIsOpen===2"> <p>Help page</p> </div> <div class="form-group" ng-show="menuIsOpen===3"> <p>Info</p> </div> <div class="form-group" ng-show="menuIsOpen===4"> <p>Refrence</p> </div> </div>
＆＃13;
＆＃13;
＆＃13;

<div ng-controller="ListBottomSheetCtrl" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp"> <div class="cnt"> <md-list ng-click="menuIsOpen = 1" 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"></i> </md-list> <div class="sub-menu"> <ul ng-init="menuIsOpen= false" ng-show="menuIsOpen === 1 "> <md-menu-item 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> </ul> </div> <md-list ng-click="menuIsOpen = 2" 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"></i> </md-list> <div class="sub-menu"> <ul ng-init="menu2IsOpen= false" ng-show="menuIsOpen === 2 "> <md-menu-item 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> </ul> </div> </div> </div>

Answer 2

我解决了以下尝试：

<div ng-controller="ListBottomSheetCtrl" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<div class="cnt" ng-init="menuIsOpen= false; menu2IsOpen= false">
    <md-list ng-click="menuIsOpen = !menuIsOpen; menu2IsOpen = false" 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"></i>
    </md-list>
    <div class="sub-menu">
        <ul ng-show="menuIsOpen">
            <md-menu-item 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>
        </ul>
    </div>

    <md-list ng-click="menu2IsOpen = !menu2IsOpen; menuIsOpen = false" 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"></i>
    </md-list>
    <div class="sub-menu">
        <ul  ng-show="menu2IsOpen">
            <md-menu-item 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>
        </ul>
    </div>
</div>

这是CODEPEN

使用ngHide / ngShow角度指令时，一次打开一个下拉列表

2 个答案: