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

导航栏切换按钮不起作用

1 个答案: