I'm using bootstrap 3 with angular. When I click a link the page isn't reloaded, causing the menu to stay open when in mobile mode.
How do I make the menu close automatically when I click a menu item?
I have tried just adding data-toggle="collapse" data-target=".navbar-responsive-collapse"
to the a
tags, but it causes strange behavior in desktop mode.
This is just updated version of previous answer
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>
Here's the angular directive I ended up using. There's a couple of things to watch out for.
I use the ic-nav-autoclose directive on the element with the nav class.
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");
}
});
});
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With