我使用angular-ui-boostrap的模块“ ui.bootstrap.dropdownToggle”创建了一个带有下拉导航栏的JSFiddle: http : //jsfiddle.net/mhu23/2pmz5/
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#"> My Responsive NavBar </a> <ul class="nav"> <li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle"> Menu 1 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#/list">Entry 1</a> </li> <li><a href="#/list">Entry 2</a> </li> </ul> </li> .... </ul> </div> </div> </div>
据我了解,这是实现此类下拉菜单的正确方法。就angularjs而言,“错误”方式将包括bootstrap.js并使用“ data-toggle =“ dropdown” …我在这里吗?
现在,我想像下面的小提琴一样向我的导航栏添加响应行为:http : //jsfiddle.net/ghtC9/6/
但是,我不喜欢上述解决方案。这个家伙包括bootstrap.js!
那么向我现有的导航栏添加响应行为的正确角度方式是什么?
我显然需要使用引导响应的navbar类,例如“ nav-collapse折叠navbar-响应-折叠”。可是我不知道
非常感谢您的帮助!
先感谢您!麦可
您可以使用“折叠”指令进行此操作:http : //jsfiddle.net/iscrow/Es4L3/ (选中HTML中的两个“注释”)。
<!-- Note: set the initial collapsed state and change it when clicking --> <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Title</a> <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. --> <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav">
也就是说,您需要将折叠状态存储在变量中,并且还可以通过(简单地)更改该变量的值来更改折叠状态。
版本0.14uib-向组件添加了前缀:
uib-
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for- prefixes
更改collapse为uib-collapse。
collapse
uib-collapse