我正在使用带角度的引导程序 3。当我单击链接时,页面不会重新加载,导致菜单在移动模式下保持打开状态。
单击菜单项时如何使菜单自动关闭?
我试过只添加 data-toggle="collapse" data-target=".navbar-responsive-collapse"
标签a
,但它会在桌面模式下导致奇怪的行为。
我正在使用带角度的引导程序 3。当我单击链接时,页面不会重新加载,导致菜单在移动模式下保持打开状态。
单击菜单项时如何使菜单自动关闭?
我试过只添加 data-toggle="collapse" data-target=".navbar-responsive-collapse"
标签a
,但它会在桌面模式下导致奇怪的行为。
这只是先前答案的更新版本
angular.module('app').directive('navCollapse', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var visible = false;
element.on('show.bs.collapse', function () {
visible = true;
});
element.on("hide.bs.collapse", function () {
visible = false;
});
element.on('click', function(event) {
if (visible && 'auto' == element.css('overflow-y')) {
element.collapse('hide');
}
});
}
};
});
HTML
<div class="collapse navbar-collapse navbar-app-collapse" nav-collapse="">
<ul class="nav navbar-nav">
</ul>
</div>
这是我最终使用的角度指令。有几件事需要注意。
我在带有 nav 类的元素上使用 ic-nav-autoclose 指令。
angular.module('incmn')
.directive('icNavAutoclose', function () {
console.log("icNavAutoclose");
return function (scope, elm, attrs) {
var collapsible = $(elm).find(".navbar-collapse");
var visible = false;
collapsible.on("show.bs.collapse", function () {
visible = true;
});
collapsible.on("hide.bs.collapse", function () {
visible = false;
});
$(elm).find("a").each(function (index, element) {
$(element).click(function (e) {
if (visible && "auto" == collapsible.css("overflow-y")) {
collapsible.collapse("hide");
}
});
});
}
});
我已经这样做了。
$(selector).click(function () {
//for close, opened dropdown.
if ($("nav").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});
如果您希望导航栏在下次单击后折叠,无论它出现在屏幕上的哪个位置:
使您的.navbar-toggle
按钮仅打开导航:
<div class="navbar-header">
<button class="navbar-toggle" ng-click="collapsed = true">
</div>
附加.navbar-collapse
一个不可见的全屏底图,单击该底图会关闭导航:
.invisible-underlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: transparent;
}
<div class="navbar-collapse" collapse="navbarCollapsed" ng-click="navbarCollapsed = true">
<div class="invisible-underlay"></div>
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="home">Home</a></li>
</ul>
</div>
此代码适用于导航栏中的下拉 sebmenu
angular.module('app').directive('navCollapse', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var visible = false;
element.on('show.bs.collapse', function () {
visible = true;
});
element.on("hide.bs.collapse", function () {
visible = false;
});
element.on('click', function (event) {
if (visible && 'auto' == element.css('overflow-y') && $(event.target).attr('data-toggle')!="dropdown") {
element.collapse('hide');
}
});
}
};
});