Minimize navigation navigation (link) in mobile mode

Question

I am using bootstrap 3 with angular. When I click the link, the page does not reload, forcing the menu to remain open in mobile mode.

How to close a menu automatically when I click a menu item?

I tried just adding data-toggle="collapse" data-target=".navbar-responsive-collapse" to a tags, but this causes weird behavior in run mode.

Answer 1

Here's the angular directive I ended up using. There are a few things to watch out for.

• Do not minimize the menu in desktop mode (see overflow-y == auto)
• Status of the handle menu when resizing a window with an open menu that closes when the window is enlarged.

I use the ic-nav-autoclose directive for an element with class nav.

---

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

Answer 2

This is just an updated version of the 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> 

Answer 3

I did like this.

 $(selector).click(function () { //for close, opened dropdown. if ($("nav").hasClass("in")) { $('[data-toggle="collapse"]').click(); } }); 

Answer 4

If you want your navigator to crash after the next click, no matter where on the screen it happens:

• Make the .navbar-toggle button only open navigation:

   <div class="navbar-header"> <button class="navbar-toggle" ng-click="collapsed = true"> </div> 

• Add .navbar-collapse with an invisible full-screen sublayer that closes the navigation when pressed:

   .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> 

Answer 5

this code works with a dropdown menu in the navigation bar

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