我正在尝试使用引导导航栏,当屏幕尺寸减小时它会折叠,但当我单击它时它不工作(菜单不显示)。
这是我的HTML
<div class="nav-holder">
<div ng-controller="NavbarCtrl">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">MENU</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<div ng-repeat="menu in menus">
<ul class="nav navbar-nav menu-group">
<li ng-if="!hasSubMenus(menu)">
<a ui-sref="{{menu.state}}">{{menu.title}}</a>
</li>
<li class="dropdown" ng-if="hasSubMenus(menu)">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">{{menu.title}}<span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="subMenu in menu.subMenus">
<a ui-sref="{{subMenu.state}}">{{subMenu.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
这是我的小文件:
.nav-holder {
text-align: left;
.menu-group {
margin-left: 7%;
}
}
下面是我的代码以及jsfiddle中的angular:
https://jsfiddle.net/suryaSharma/3e8hkys9/
最佳答案
打开和关闭菜单项需要bootstrap.js,bootstrap.js需要jquery.js。所以,添加jquery.js文件。
它说,你可以打开控制台进行检查。
错误:引导的JavaScript需要jQuery
--编辑--
这是最新的jsFiddle。
更新代码使其工作正常。
<div class="nav-holder" ng-app="fsdoApp"> // missing ng-app
</div>
angular.module('fsdoApp', []) // missing [] for initiating module
关于html - Bootstrap导航栏图标栏不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34320199/