角度材质中的 md 菜单行为

我想有多个 md 菜单，让每个菜单打开关闭另一个而不必先关闭已经打开的菜单？如何更改默认行为？

这里有一个小提琴来说明：https://jsfiddle.net/w1pf0et5/

<body ng-app="BlankApp" ng-cloak>
<md-menu md-offset="10 60" >
            <!-- Trigger element is a md-button with an icon -->
            <md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu">
            open first
            </md-button>
            <md-menu-content width="6" id="messages">
                <md-menu-item md-menu-origin md-menu-align-target ><md-button ng-click="doSomething()">
                    Test 1
                </md-button></md-menu-item>
                <md-menu-item><md-button ng-click="doSomething()">
                    Test 2
                </md-button></md-menu-item>
                <md-menu-item><md-button ng-click="doSomething()">
                   Test 3
                </md-button></md-menu-item>
                <md-menu-item><md-button ng-click="doSomething()">
                   Test 4
                </md-button></md-menu-item>
            </md-menu-content>
        </md-menu>
        <md-menu md-offset="10 60" >
            <!-- Trigger element is a md-button with an icon -->
            <md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu">
            open second
            </md-button>
            <md-menu-content width="6" id="messages">
                <md-menu-item md-menu-origin md-menu-align-target ><md-button ng-click="doSomething()">
                    Test 1
                </md-button></md-menu-item>
                <md-menu-item><md-button ng-click="doSomething()">
                    Test 2
                </md-button></md-menu-item>
                <md-menu-item><md-button ng-click="doSomething()">
                   Test 3
                </md-button></md-menu-item>
                <md-menu-item><md-button ng-click="doSomething()">
                   Test 4
                </md-button></md-menu-item>
            </md-menu-content>
        </md-menu>
        <script>
            angular.module('BlankApp', ['ngMaterial']);
        </script>

您必须将

md-menu-bar与md-toolbar一起使用才能获得所需的结果，并且必须使用button代替md-button打开菜单（触发器元素）。例如，检查以下笔。

http://codepen.io/next1/pen/vGXOaY

相关内容

最新更新

热门标签：