Fiz*_*han 5 javascript twitter-bootstrap angularjs drop-down-menu
我在导航栏上有下拉菜单,仅显示移动设备.单击下拉菜单链接时,它只是移动到另一个路径.如您所知,此操作不会刷新整个页面.但即使我点击下拉列表中的菜单,它也不会消失.
如果单击菜单链接或路由更改,我想关闭下拉列表.我如何在angularjs 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');
});
}
}
});
| 归档时间： |
|
| 查看次数： |
8561 次 |
| 最近记录： |