gpt4 book ai didi

javascript - 在angular bootstrap ui中点击关闭下拉菜单

转载 作者:搜寻专家 更新时间:2023-11-01 04:25:31 25 4
gpt4 key购买 nike

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

如果单击菜单链接或更改路线,我想关闭下拉菜单。我如何在 angularjs bootstrap 中做到这一点?

最佳答案

如果您通过单击 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');
});
}
}
});

关于javascript - 在angular bootstrap ui中点击关闭下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20918627/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com