任何人都可以请让我知道为什么引导下拉菜单不起作用

问题描述：

我使用引导框架并试图复制http://twitter.github.com/bootstrap/examples/hero.html 任何人都可以告诉我为什么下拉菜单不起作用。下拉菜单在这个例子中工作不与我的代码工作，我已经包括适当的风格和JS！和另外一个风格正在这么想着它不是一个概率的风格任何帮助会不胜感激任何人都可以请让我知道为什么引导下拉菜单不起作用

我以前用下面的在线工具

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
     } 
    </style> 
    <meta charset="utf-8"> 
     <title> The first step</title> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 

<body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="#">Project name</a> 
      <div class="nav-collapse collapse"> 
      <ul class="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="nav-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
       </li> 
      </ul> 
      <form class="navbar-form pull-right"> 
       <input class="span2" type="text" placeholder="Email"> 
       <input class="span2" type="password" placeholder="Password"> 
       <button type="submit" class="btn">Sign in</button> 
      </form> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 
<hr> 
     <footer> 
     <p>&copy; Company 2013</p> 
     </footer 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 
"></script> 
    <script src="js/bootstrap.min.js"></script> 

</body> 
</html>

答

，它很适合我。它是免费的，快捷。我创建了一个示例下拉菜单，然后检查了适用于我的网站的代码。祝你好运。

CSS Menu Maker

答

@bana关闭页脚关闭标签

编辑您的脚本引用这样

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

+1貌似这个问题对我来说 – Jim 2013-02-22 09:30:40

他使用谷歌的CDN jQuery的..所以没有错那个。 – Shail 2013-02-22 09:37:03

@Shail他错过了http：脚本参考和错误输入的页脚关闭标记 – snowp 2013-02-22 09:42:04

答

使用的CSS和JS文件方式如下：检查的jsfiddle Example with cloud hosted bootstrap css and js
你也在您的页面中使用的是错误版本的Jquery，它必须是

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

的HTML应如下所示：

<!DOCTYPE html> 
    <html> 
    <head> 
     <style type="text/css"> 
     body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
      } 
     </style> 
     <meta charset="utf-8"> 
     <title> The first step</title> 
     <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 

     <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> 
     </head>

及脚注：

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

任何人都可以请让我知道为什么引导下拉菜单不起作用

相关推荐