我正在尝试使用引导导航栏,当屏幕尺寸减小时它会折叠,但当我单击它时它不工作(菜单不显示)。
这是我的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/

10-09 18:11
查看更多