bootstrap实现响应式导航栏 并解决滚动条并闪现的问题

每个导航栏的<li>标签上加属性data-toggle="collapse" data-target="#myCollapsible"实现当行栏的显示隐藏，会出现点击时滚动条并闪现的问题。

解决方式是使用angular.element("#myCollapsible").collapse('hide')方法替换。

1、HTML：

<div ng-app="myApp" ng-controller="gridCtrl"> <!--屏幕缩小之后，导航栏将收缩起来--><nav id="navbar-example" class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapsible"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse" id="myCollapsible"><ul class="nav navbar-nav navbar-right" ><li ui-sref-active="active" ng-click="hideNav()"><a ui-sref="home" ><span class="glyphicon glyphicon-home"></span><span class="hidden-sm"> 首页</span></a></li><li class="dropdown" ng-hide="loginValue1" ><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span><span class="hidden-sm">账号</span><span class="caret"></span></a><ul class="dropdown-menu"><li ng-click="hideNav()"><a ui-sref="login" ><span class="glyphicon glyphicon-log-in"></span><span>&nbsp;&nbsp;登录</span></a></li><li ng-click="hideNav()"><a><span class="glyphicon glyphicon-plus-sign"></span><span>&nbsp;&nbsp; 注册</span></a></li></ul></li></ul></div></div></nav></div>

2、js上：

<script>var app = angular.module('myApp',[]);app.controller('gridCtrl', function($scope,$rootScope) {var vm = this;$rootScope.hideNav = hideNav;function hideNav(){angular.element("#myCollapsible").collapse('hide')}});</script>