引導程序的下拉列表不起作用

Question

這是我的HTML文件。我將這個文件添加到ng-view中。但下降似乎並不奏效。

<button style="background-color: transparent; border: none" class="dropdown-toggle" data-toggle="dropdown" type="button">Admin 
    <span class="caret"></span> 
    <ul class="dropdown-menu"> 
    <li><a role="menuitem" tabindex="-1" href="#">Logout</a></li> 
    </ul> 
</button> 

這些是我的應用程序所需的必要的CSS和JS文件。我有一個單頁的應用程序，所以我將上面的html代碼這個使用NG-視圖

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script> 
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script> 
<script src="/javascripts/vendor/angular-route.js"></script> 
<script src="/javascripts/app.js"></script> 
<script src="/javascripts/commons/constants.js"></script> 
<!-- Directives scripts --> 

<script src="/javascripts/directives/passwordpattern.js"></script> 
<script src="/javascripts/directives/passwordstrength.js"></script> 

<!-- Scripts for authentication--> 
<script src="/javascripts/services/AuthService.js"></script> 
<script src="/javascripts/controllers/AuthController.js"></script> 

<!-- Scripts for Trucks --> 
<script src="/javascripts/services/TruckService.js"></script> 
<script src="/javascripts/controllers/TrucksController.js"></script> 
<!-- Scripts for customers --> 
<script src="/javascripts/services/CustomerService.js"></script> 
<script src="/javascripts/controllers/customersController.js"></script> 
<!-- Scripts for Admin --> 
<script src="/javascripts/controllers/AdminController.js"></script> 

<!--<script data-main="/javascripts/main.js" src="/javascripts/vendor/require-2.2.0.js"></script>--> 

<!-- Stylesheets --> 
<link rel='stylesheet' href='/stylesheets/style.css'/> 
<link rel="shortcut icon" href="https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/amazon-16.png"/> 
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>--> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/> 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/> 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/> 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/> 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" /> 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" /> 

<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>--> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script> 

Answer 1

使用這種方式：

<div class="dropdown"> 
     <button style="background-color: transparent; border: none" class=dropdown-toggle" data-toggle="dropdown" type="button" >Admin 
       <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu"> 
       <li><a role="menuitem" tabindex="-1" href="#">Logout</a></li> 
     </ul> 
    </div> 

Answer 2

爲從「Libor的Zahrádka」報道，你需要包括引導JavaScript庫：

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script> 
 
<script src="/javascripts/vendor/angular-route.js"></script> 
 
<script src="/javascripts/app.js"></script> 
 
<script src="/javascripts/commons/constants.js"></script> 
 
<!-- Directives scripts --> 
 

 
<script src="/javascripts/directives/passwordpattern.js"></script> 
 
<script src="/javascripts/directives/passwordstrength.js"></script> 
 

 
<!-- Scripts for authentication--> 
 
<script src="/javascripts/services/AuthService.js"></script> 
 
<script src="/javascripts/controllers/AuthController.js"></script> 
 

 
<!-- Scripts for Trucks --> 
 
<script src="/javascripts/services/TruckService.js"></script> 
 
<script src="/javascripts/controllers/TrucksController.js"></script> 
 
<!-- Scripts for customers --> 
 
<script src="/javascripts/services/CustomerService.js"></script> 
 
<script src="/javascripts/controllers/customersController.js"></script> 
 
<!-- Scripts for Admin --> 
 
<script src="/javascripts/controllers/AdminController.js"></script> 
 

 
<!--<script data-main="/javascripts/main.js" src="/javascripts/vendor/require-2.2.0.js"></script>--> 
 

 
<!-- Stylesheets --> 
 
<link rel='stylesheet' href='/stylesheets/style.css'/> 
 
<link rel="shortcut icon" href="https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/amazon-16.png"/> 
 
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>--> 
 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/> 
 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css"/> 
 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css"/> 
 

 

 

 

 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="dropdown"> 
 
    <button style="background-color: transparent; border: none" class="dropdown-toggle" data-toggle="dropdown" 
 
      type="button">Admin 
 
     <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a role="menuitem" tabindex="-1" href="#">Logout</a></li> 
 
    </ul> 
 
</div>