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

我有一个简单的下拉菜单，我想调整一下。我需要帮助设置下拉列表的动画，以便它在打开时缩小比例。但这不是我最大的担忧。我真正需要的帮助是一次只打开一个下拉列表。所以如果我打开一个，而另一个之前已经打开过，它应该会关闭

我正在使用角度材料，所以我正在寻找一个角度控制器或指令解决方案，一个使用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>

---

我有一张支票，你可以结账。非常感谢

我解决了以下问题：

<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>      

以下是

在ng click中，将变量menuIsOpen设置为ng click=menuIsOpen=1，并将ng show=menuIsOpen==1设置为其他菜单

范例

var app=angular.moduleapp，[]； app.controllerctrl，功能$scope{ }; 关于页面 帮助页 信息页 参考页 关于页面

帮助页

信息

引用

---

为什么不能使用简单的ng if条件在另一个打开时验证并关闭一个呢。单击一个下拉列表，您可以将第二个下拉列表的值设置为false，反之亦然。然后使用ng if或ng中的值-show@CrazyMac听起来不错！想用一个例子给出答案吗？如果你不介意的话。我会很感激的Jenny发的代码应该有用