点击角度bootstrap ui关闭下拉菜单

Question

我在导航栏上有下拉菜单，仅显示移动设备。 单击下拉菜单链接时，它只是移动到另一个路径。 如您所知，此操作不会刷新整个页面。 但即使我点击下拉列表中的菜单，它也不会消失。

如果单击菜单链接或路由更改，我想关闭下拉列表。 我如何在angularjs bootstrap中做到这一点？

Answer 1

如果您在单击bootstrap下拉菜单的任何选项时更新路线，那么您可以只查看路线更改事件：

假设你有以下链接打开工具提示。

<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');
         });
       } 
    }
  });

Answer 2

我发现这个解决方案对于关闭菜单非常有用。

$scope.$broadcast '$locationChangeSuccess'

Answer 3

我也有这个问题， ~~似乎我们可以使用dropdown-toggle指令。~~

这不再有效，但是使用角度v1.2.26 angular-ui-bootstrap 0.11.2 Bootstrap v3.2.0初始问题似乎已修复，即使页面未刷新，下拉菜单也会关闭。

点击角度bootstrap ui关闭下拉菜单

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-01-04 08:44:40

解决方案2
1 2015-02-05 18:34:43

解决方案3
0 2014-09-01 15:12:53

点击角度bootstrap ui关闭下拉菜单

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-01-04 08:44:40

解决方案2 1 2015-02-05 18:34:43

解决方案3 0 2014-09-01 15:12:53

解决方案1
2 已采纳 2014-01-04 08:44:40

解决方案2
1 2015-02-05 18:34:43

解决方案3
0 2014-09-01 15:12:53