在角度引导 ui 中单击时关闭下拉菜单
Posted
技术标签:
【中文标题】在角度引导 ui 中单击时关闭下拉菜单【英文标题】：Close dropdown menu on click in angular bootstrap ui 【发布时间】：2014-01-22 00:10:06 【问题描述】：我在导航栏上的下拉菜单仅针对移动设备显示。单击下拉菜单链接时，它只是移动到另一个路径。如您所知，此操作不会刷新整个页面。但即使我点击下拉菜单下的菜单，它也不会消失。
如果单击菜单链接或更改路线，我想关闭下拉菜单。我如何在 angularjs bootstrap 中做到这一点？
【问题讨论】：
【参考方案1】：如果您在单击引导下拉菜单的任何选项时更新路线，那么您可以只关注路线更改事件：
假设您有以下打开工具提示的链接。
<a class="dropdown-toggle">
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">The first choice!</a>
</li><li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">And another choice for you.</a>
</li><li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">but wait! A third!</a>
</li>
</ul>
$scope.$on('$routeUpdate', function(scope, next, current)
$('html').trigger('click');
);
上述方法可行，但绝对不需要在每次路由更改时抓取 html 元素（因为它会导致回流），因此最好将其放入指令中，如下所示：
<html hide-dropdown>
angular.module('App', []).
directive('hideDropdown', function()
return
restrict: 'A',
link: function(scope, element)
scope.$on('$routeUpdate', function(scope, next, current)
element.trigger('click');
);
);
【讨论】：
谢谢。但它在第一次点击后隐藏了下拉菜单。 我明白了。通常，如果您单击任何菜单选项，它会自动关闭菜单 - 我想知道为什么它不是您的情况。我认为除了动态触发对 html 节点的点击之外，没有其他选项可以隐藏它，如更新的答案所示。 在我的情况下，路由是基于散列变化的。即使 url 的散列发生变化，下拉菜单会自动切换吗？我了解整页更改只会重置下拉菜单。 我应该把 javascript 放在哪里？在控制器中？ @benshope：是的，在控制器中，对于此处所述的问题，但您最好使用更新后的答案中解释的指令。【参考方案2】：我发现这个解决方法对关闭菜单很有用。
$scope.$broadcast '$locationChangeSuccess'
【讨论】：
【参考方案3】：我也刚遇到这个问题，看来我们可以使用dropdown-toggle指令了。
这不再有效，但与 角度 v1.2.26 角度-ui-bootstrap 0.11.2 引导程序 v3.2.0 最初的问题似乎已解决，即使页面未刷新，下拉菜单也会关闭。
【讨论】：
似乎不起作用（angular 1.2.24，angular-bootstrap 0.11，Bootstrap 3） @for3st 感谢您指出这一点，您是对的，它不再起作用了以上是关于在角度引导 ui 中单击时关闭下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章