导航栏难以工作

我正在使用Bootstrap导航栏工作，我无法让下拉菜单正常工作。我使用JSFiddle来测试它导航栏难以工作

~~https://jsfiddle.net/addlemanrachel/n9m8fjm8/#&togetherjs=nhtT9oahiE~~编辑：错误的链接！正确的链接是：https://jsfiddle.net/addlemanrachel/n9m8fjm8/。

下面是HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-left"> 
      <li><a href="#"><i class="fa fa-home"></i></a></li> 
      <li class="dropdown active"> 
      <a href='#' class="dropdown-toggle" data-toggle="dropdown">Community</a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Recent Activity</a></li> 
       <li><a href="#">Member Activity</a></li> 
       <li><a href="#">Member List</a></li> 
       <li><a href="#">Member Groups</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Pet Help</a></li> 
      <li><a href="#">Pets for Sale</a></li> 
      <li><a href="#">Pet Services</a></li> 
     </ul> 
     </div> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    </div> 
</div>

起初我还以为我的问题没有连接jQuery的，但这样做，我仍然不能得到它的工作后。预先感谢您的帮助！我对此很陌生，只是不确定自己做错了什么。

来源

2016-04-23 Rachel Addleman

打开您的jsfiddle你可以看到你出现以下错误：

bootstrap.min.js:6 Uncaught ReferenceError: jQuery is not defined

你得到这个错误，因为jQuery是一个引导的依赖，所以你必须确保你正确地加载它。

包括在你的jsfiddle提供它现在的作品

Working fiddle

附加注释的jQuery V2.2.3：

如果您需要加载引导和jQuery在你的HTML页面，不是在jsfiddle中，你必须链接你的html页面中<head>标签内的相应资源。

例如，使用MaxCDN链接，您可以使用下面的代码：

<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 

<body> 
<!-- html code ...--> 
</body>

重要：确保您在完全相同的顺序，先jQuery的引导随后的js文件。

来源

2016-04-23 15:46:21 fbid

试试这个

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Navbar Mockup</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 

    </div> </div> 
</nav> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </body> 
</html>

来源

2016-04-23 15:57:32

导航栏难以工作

回答

相关问题