javascript - 导航栏切换按钮不起作用

我目前正在使用Bootsrap，但很难使navbar-toggle按钮起作用。

起初，我认为导航栏代码有问题，因此我将示例粘贴到了Bootstrap Website上，尽管那也不起作用。该按钮显示，但单击时未显示下拉菜单。

在我的文件中搜索该项目时，我在bootstrap / js / collapse.js中看到crash.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; };

最佳答案

您需要同时具备以下两个条件：

<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' />

关于javascript - 导航栏切换按钮不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28421284/