導航欄切換按鈕無法正常工作

Question

我目前正在使用Bootsrap，並且導致導航欄切換按鈕無法正常工作。

起初我以爲這是我的導航欄代碼，所以我在Bootstrap Website上粘貼了這個例子，雖然那也沒用。該按鈕顯示，但點擊時不顯示下拉菜單。

當我搜索我的項目文件時，我看到bootstrap/js/collapse.js中的collapse.js。

我採用了棱角分明的well.Here是我爲我的導航欄代碼：

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

我不知道我在做什麼錯。

更新：

最後我只是用數據-NG-類基於變量的按鈕設置切換崩潰類。

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