导航栏切换按钮不起作用

Question

我目前正在使用 Bootsrap，但无法让导航栏切换按钮正常工作。

起初我认为这与我的导航栏代码有关，所以我将示例粘贴到 Bootstrap Website 上，尽管这也不起作用。该按钮会显示，尽管单击它时不会显示下拉菜单。

当我在我的文件中搜索项目时，我在 bootstrap/js/collapse.js 中看到了 collapse.js。

我也在使用 Angular。这是我的导航栏代码：

<nav class="navbar navbar-inverse navbar-fixed-top top-navbar">
    <div class="container-fluid">
        <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" ui-sref="{{side.landingState}}">
        <img class="logo" alt="Logo" src="/assets/img/side_logo_red.png">
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="main-menu">
      <ul class="navbar-nav nav nav-list {{side.role}}" data-ng-if="!Guest">
        <li class="active nav-icon"><a ui-sref="{{side.homeState}}"><i class="fa fa-home"></i></a></li>
        <li class="active nav-icon"><a ui-sref="{{side.postsState}}" ui-sref-opts="{reload: true}"></a></li>
        <li class="active nav-icon" data-ng-if="Student"><a ui-sref="{{side.profilePage}}"><i class="fa fa-user"></i></a></li>
        <li class="dropdown active nav-icon">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><i class="fa fa-chevron-down"></i></a>
          <ul class="dropdown-menu dropdown-menu-right" role="menu">
            <li data-ng-if="User"><a role="menuitem" ui-sref="{{side.settingsState}}"><div class="icon"><i class="fa fa-cog"></i></div><div class="text">Settings</div></a></li>
            <li><a role="menuitem" ui-sref="{{side.futureState}}"><div class="icon"><i class="fa fa-rocket"></i></div><div class="text">Future Services</div></a></li>
            <li role="presentation" class="divider" data-ng-if="user"></li>
            <li data-ng-if="user"><a role="menuitem" data-ng-click="logout()"><div class="icon"><i class="fa fa-sign-out"></i></div><div class="text">Logout</div></a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav-list {{side.role}}" data-ng-if="guest">
        <li class="nav-icon"><i class="fa fa-rocket"></i> Sign Up</li>
        <li class="nav-icon">Stuff...</li>
        <li class="nav-icon">More Stuff...</li>
      </ul>
    </div>
    </div>
</nav>

我不确定我做错了什么。

更新：

我最终只是使用 data-ng-class 根据按钮设置的变量来切换折叠类。

<button type="button" class="navbar-toggle collapsed" data-ng-click="toggleCollapsed()">

然后在我使用的控制器中

$scope.collapsed = true; $scope.toggleCollapsed = function(){ $scope.collapsed = !$scope.collapsed; };

Answer 1

你需要同时拥有这两个：

<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

并确保您在控制台中没有收到任何错误。

如果您尝试通过手机执行，则需要将其添加到您的 index.html：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />