1. 首頁
  2. 問答
  3. Bootstrap 3下拉不起作用

Bootstrap 3下拉不起作用

2013-10-28 100 views
4

我不太明白，當我在本地啓動我的html頁面時，下拉菜單不起作用。Bootstrap 3下拉不起作用

我試圖在bootply及其工作上覆制/粘貼我的html代碼！令人難以置信...

http://bootply.com/90610

任何想法？

我不想包括所有的JS文件，下拉只是必要的文件（dropdown.js）

我真的不知道我應該嘗試...

如果任何一個能幫助我它會真的很感激它。

謝謝

來源

2013-10-28 insidelulz

+0

您是否檢查過控制檯是否有任何錯誤？ – 412

+0

在控制檯中的任何錯誤？ –

+0

Firebug的控制檯錯誤： 類型錯誤：$未定義 \t $（ '下拉撥動。'）下拉菜單（） 的index.html（LIGNE 11） 的ReferenceError：$沒有定義 \t $（ '.dropdown-toggle'）。dropdown（） – insidelulz

回答

16

你必須包括jQuery的1.X或2.X當你（之前3.3.7 are not compatible with JQuery 3.X引導版本），把這個在您自己的HTML頁面。請確保在 bootstrap.js（或dropdown.js）之前包含jquery.js 。通常，您只需在</body>標記之前執行此操作。

這是一個完整的工作示例，引導和jQuery是從外部的CDN加載：

<html> 
<head> 
    <title>Example</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- Bootstrap --> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 

</head> 
<body> 

<!-- Static navbar --> 
<div class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Nav header</li> 
         <li><a href="#">Separated link</a></li> 
         <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
      </ul> 

     </div> 
     <!--/.nav-collapse --> 
    </div> 
</div> 

<!-- include javascript, jQuery FIRST --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
</body> 

</html>

將這個在一個.html文件，並在瀏覽器中打開它。

來源

2013-10-28 21:36:16

+0

我不想添加完整的jquery文件，它的重量並不是很「安全」。 Jquery使用哪個函數來下拉菜單？ – insidelulz

+0

jQuery既輕巧又安全。 「不安全」是什麼意思？我不知道jQuery的哪些部分用於下拉菜單，並且我認爲它需要相當多的挖掘bootstrap.js和jquery.js才能找到它;） –

+0

供讀者參考：Bootstrap 3.X不兼容與JQuery3.X。您需要鏈接到JQuery 2.X或1.X. [見這裏]（https://github.com/twbs/bootstrap/issues/16834） – TolkienWASP

0

至少對我而言，以上所有問題都沒有解決問題。 升級到引導程序的v3.2.0的伎倆。這裏是一個自包含的示例代碼。只需複製粘貼到測試html文件，它應該可以工作（所有js和css都是cdn加載的）：

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script> 
    <link rel="stylesheet" href="//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> 


</head> 
<body> 

<div class="btn-group"> 
    <button id="myid" type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown"> 
    Action <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 
</body> 
</html>

來源

2014-07-04 10:22:50 DanC

相關問題

 相關問題