導航欄難以工作

我正在使用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

導航欄難以工作

回答

相關問題