html - Bootstrap 导航栏图标栏不起作用

Question

我正在尝试使用 bootstrap 导航栏，当屏幕尺寸缩小时它会折叠，但当我单击它时它不起作用(菜单未出现)。 这是我的 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>

这是我的 less 文件:

.nav-holder {
  text-align: left;
  .menu-group {
    margin-left: 7%;
  }
}

这是我的代码以及 jsfiddle 中的 Angular :

https://jsfiddle.net/suryaSharma/3e8hkys9/

Answer 1

打开和关闭菜单项需要 bootstrap.js，而 bootstrap.js 需要 jquery.js。因此，添加 jquery.js 文件。

您可以打开控制台并检查，它说。

Error: Bootstrap's JavaScript requires jQuery

--编辑--

这是更新的 jsFiddle .

更新代码使其正常工作。

<div class="nav-holder" ng-app="fsdoApp"> // missing ng-app

</div>

angular.module('fsdoApp', []) // missing [] for initiating module