引導下拉不起作用

我無法使引導下拉工作。這裏是我的導航HTML：引導下拉不起作用

<ul class='nav'> 
    <li class='active'>Home</li> 
    <li class='dropdown'> 
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">asds</a></li> 
     <li class="divider"></li> 
    </ul> 
    </li> 
    <li>Payday loans</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul>

而且這裏的腳本：

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('.dropdown-toggle').dropdown() 
    }); 
</script>

我在做什麼錯？謝謝你的回答！

來源

2012-09-17 hjuster

在類似張貼檢查我的答案 http://stackoverflow.com/questions/15592158/twitter-bootstrap-dropdown-not-working-in-any-browser/23486239#23486239 –

我的問題是缺少bootstrap js文件，以防別人幫助其他人 – Drewdavid

我更新了我的''''Gruntfile.js'''，它改變了'''jsFileList'''的一些路徑...更新路徑並運行相應的Grunt任務（grunt dev/grunt build/etc）解決了我的問題問題。 –

工作演示：http://codebins.com/bin/4ldqp73

試試這個

<ul class='nav'> 
    <li class='active'>Home</li> 
    <li> 
    <div class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">    
     <li><a href="#">asds</a></li> 
     <li class="divider"></li> 
     </ul> 
    </div> 
    </li> 
    <li>Payday loans</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul>

來源

2012-09-17 12:06:53 gaurang171

Oups ...愚蠢的我...我缺少bootstrap.css文件。現在工作正常，謝謝！ – hjuster

+25

演示中的下拉菜單似乎不再有效，或者問題出在我的瀏覽器上。 – Noah

您是否包含jquery.js？

此外，比較這行代碼與你：

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

看到這個版本的作品確定。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Bootstrap dropdown</title> 
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <ul class="nav"> 
        <a class="brand" href="#">w3resource</a> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li class="dropdown" id="accountmenu"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">PHP</a></li> 
          <li><a href="#">MySQL</a></li> 
          <li class="divider"></li> 
          <li><a href="#">JavaScript</a></li> 
          <li><a href="#">HTML5</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container-fluid"> 
    <h1>Dropdown Example</h1> 
    </div> 
    <script type="text/javascript" src="js/jquery-latest.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    </script> 
</body> 
</html>

來源

2012-09-17 12:05:29 Frankline

FYI：如果你有bootstrap.js，你應該不加引導，dropdown.js。我不確定bootstrap.min.js的結果。

來源

2013-01-22 01:37:49 Fahrenheit

謝謝。我有dropdown.js和bootstrap.js，因此它不起作用。刪除dropdown.js解決了這個問題。 – nyxz

你是最好的人，我花了大約6個小時在這找到問題的地方!!，再次感謝.. – Adel

非常感謝你，先生！我有同樣的問題，但我有'bootstrap.js'和'bootstrap.min.js.'。當我刪除後者時，它可以工作。 – 2014-06-05 02:56:04

對於你的風格，你需要通常只是</head>元素

<link href="css/bootstrap.css" rel="stylesheet">

下一頁之前，包括自舉的css文件，你需要包含js文件，它的建議，包括他們在的結束文件，一般在</body>之前，因此頁面加載速度更快。

<script src="js/jquery.js"></script>   
<script src="js/bootstrap.js"></script>

來源

2013-03-15 19:36:37

106

我有同樣的問題。後一對夫婦的麻煩拍攝時間發現，

我

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script> 
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

代替，

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script> 
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

希望這可以幫助別人

來源

2014-06-01 22:08:03

有什麼區別？ – CodyBugstein

@Imray js文件的順序... hth ... –

爲我做了訣竅 –

你要導入此文件到您的html的<head></head>。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

來源

2014-06-27 03:22:35 Martin

我不知道爲什麼或者我做錯了什麼，但是這個答案對我來說是這樣做的。謝謝馬丁！ – booleanCube

當我包含bootstrap.min.js兩次時，我遇到了同樣的問題。刪除其中一個，它開始工作。

來源

2014-07-10 10:27:53 kubilay

這解決了我的問題。我的角度應用程序通過吞吐任務拉入多個副本，以注入我的bower_components – Pakage

這是我的情況中的問題！...謝謝 – MarioAraya

修正了我的太多，非常感謝 –

在正文標籤中添加以下行。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files 
     as needed --> 
    <script src="js/bootstrap.min.js"></script>

來源

2014-08-05 20:00:34

謝謝，這節省了我一些時間。 – DrewT

我有同樣的問題，這使我在這裏。

我的問題：我使用推薦的jQuery 1.12.0版本作爲我的jquery腳本文件。

解決方案：用jquery 2.2.0版本替換jquery腳本。

爲我解決了這個問題。

來源

2016-02-06 17:11:50

在頭部分試試這個

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

來源

2016-02-17 22:06:17

你必須檢查衝突的CSS文件/例如性能，你可以有「.nav」自定義樣式的內容在其他地方嘗試禁用自己的CSS文件，並檢查如果工作再檢查哪個文件或自定義樣式，使衝突也確保你包括你的代碼

來源

2016-04-18 22:18:53 Mancy

這裏我所做的是在bootstrap.min.js .....

只是刪除bootstr從我的項目ap.min.js並添加bootstrap.js它和它開始工作........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.js" 
        //"~/Scripts/bootstrap.min.js"));

來源

2016-06-08 12:34:37

添加到#kubilay答案：每個文檔可以有一個名爲「A」的類。 .min.css/.min.js - 通常是相同的css和js文件，所有空格都從中刪除。它使它們更小並且加載速度更快。瀏覽器無論如何都不需要空格。 –

刪除一個，如果你已經使用兩者 –

兩個引導和jQuery必須包括：

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script> 

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" /> 
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

注意：jquery-xxxmin.js版本必須是2.xx版本 !!!

來源

2016-07-19 18:42:04 NotAMonkey24

我想通了，併爲此IST最簡單的方法只是複製和過去的引導鏈接的CDN可以在https://www.bootstrapcdn.com/被發現和jQuery的CDN腳本，可以在這裏找到https://code.jquery.com/後您複製環節，引導鏈接在HTML和jQuery腳本的頭貼粘貼HTML的身體像下面的例子：

<!DOCTYPE html> 
    <html> 
     <head> 

     <title>Purrfect Match Landing Page</title> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <!--<link rel="stylesheet" href="griddemo.css"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

     </head> 

     <body> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script>  
     </body> 
    </html>

對我的作品完美希望它的工作原理也爲大家:)

來源

2016-11-15 20:54:35

引導下拉不起作用

回答

相關問題