Bootstrap 3下拉不起作用

我不太明白，当我在本地启动我的html页面时，下拉菜单不起作用。Bootstrap 3下拉不起作用

我试图在bootply及其工作上复制/粘贴我的html代码！令人难以置信...

http://bootply.com/90610

任何想法？

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

我真的不知道我应该尝试...

如果任何一个能帮助我它会真的很感激它。

谢谢

来源

2013-10-28 insidelulz

您是否检查过控制台是否有任何错误？ – 412

在控制台中的任何错误？ –

Firebug的控制台错误：类型错误：$未定义 \t $（ '下拉拨动。'）下拉菜单（）的index.html（LIGNE 11）的ReferenceError：$没有定义 \t $（ '.dropdown-toggle'）。dropdown（） – insidelulz

你必须包括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">  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body>  <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>  </div> </div>  <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

我不想添加完整的jquery文件，它的重量并不是很“安全”。 Jquery使用哪个函数来下拉菜单？ – insidelulz

jQuery既轻巧又安全。 “不安全”是什么意思？我不知道jQuery的哪些部分用于下拉菜单，并且我认为它需要相当多的挖掘bootstrap.js和jquery.js才能找到它;） –

供读者参考：Bootstrap 3.X不兼容与JQuery3.X。您需要链接到JQuery 2.X或1.X. [见这里]（https://github.com/twbs/bootstrap/issues/16834） – TolkienWASP

至少对我而言，以上所有问题都没有解决问题。升级到引导程序的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

Bootstrap 3下拉不起作用

回答

相关问题