在移动模式下导航（链接单击）时折叠导航栏

我正在使用带有角度的引导程序3。当我点击链接时，页面不会重新加载，导致菜单在移动模式下保持打开状态。在移动模式下导航（链接单击）时折叠导航栏

当我点击菜单项时，如何自动关闭菜单？

我试过在a标签中加入data-toggle="collapse" data-target=".navbar-responsive-collapse"，但是在桌面模式下会导致奇怪的行为。

2013-08-19 Carl R

这是我最终使用的角度指令。有几件事值得注意。

不要折叠菜单时，在桌面模式下（寻找溢出-Y ==自动）
手柄菜单状态时，当窗口增长是关闭打开的菜单调整窗口。

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

来源

2013-09-05 21:29:18

不错。我正在寻找这方面的一些东西。 – Durin

太好了。为什么我们不直接向navbar-collabse添加指令而不是父元素。所以我们可以避免额外的jQuery查找。 –

为了万一其他人在单页面应用程序中更改页面后出现菜单崩溃的问题，此链接将显示如何在路由已处理完成后更改'isCollapsed'变量：https：/ /www.pointblankdevelopment.com.au/blog/getting-the-bootstrap-3-navbar-and-angularjs-to-play-nicely-together – alimac83

我已经这样做了。

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

来源

2013-09-05 19:22:42

这是刚刚更新了以前的答案的版本

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>

来源

2014-01-04 14:36:38

该代码可以使用下拉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'); 
       } 
      }); 
     } 
    }; 
});

来源

2014-12-24 10:33:51

如果你希望你的导航栏下一个点击后崩溃，无论在屏幕上它发生：

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

来源

2015-05-28 00:24:06

在移动模式下导航（链接单击）时折叠导航栏

回答

相关问题