Question

我有一个下拉菜单，可以在点击时切换，我已经完全摆脱了jQuery，因此我可以使用AngularJS来切换菜单。问题是，如果下拉部分可见，则必须再次单击该按钮以隐藏它。因此，切换菜单的唯一方法是立即使用该按钮，我希望用户只需单击页面上不是菜单的某个位置即可关闭菜单。

现在这里是我的代码：

<button type="button" class="btn btn-nav dropdown-toggle" aria-expanded="false" ng-click="showMenu = !showMenu">
    {{ getNavTitle() | translate }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" ng-class="{ show: showMenu === true }">
    <li>
        <a id="hottest" ng-click="nav.replaceTo('/one')" ng-class="{active: subnav === 'top'}"><big>{{ 'subnav-one' | translate }}</big></a>
    </li>
    <li>
        <a id="latest" ng-click="nav.replaceTo('/two')" ng-class="{active: subnav === 'latest'}"><big>{{ 'subnav-two' | translate }}</big></a>
    </li>
    <li>
        <a id="friends" ng-click="nav.replaceTo('/three')" ng-class="{active: subnav === 'fans'}"><big>{{ 'subnav-three' | translate }}</big></a>
    </li>
</ul>

AngularJS：

$scope.showMenu = false;

所以这很有效。使用jQuery，我只是在页面的某个地方听一个点击，它不是三个下拉链接和切换按钮之一，然后关闭菜单。但是对于AngularJS，我不确定如何去做。

Answer 1

我猜你正在使用bootstrap。您可以使用angular-bootstrap或bootstrap.js本身。我认为应该已经在那里实现了自动关闭功能。

如果你想实现它，你自己添加一个单击事件处理程序，它关闭菜单，使用'once'添加到主体，这样处理程序将执行一次，然后从事件监听器中删除。

在没有jQuery的情况下在页面的任何地方聆听

1 个答案: