Schwierigkeit, Navbar zur Arbeit zu bekommen

Ich arbeite an einer Navbar mit Bootstrap und ich habe Probleme, das Dropdown-Menü zu arbeiten. Ich verwende JSFiddle, um es zu testenSchwierigkeit, Navbar zur Arbeit zu bekommen

~~https://jsfiddle.net/addlemanrachel/n9m8fjm8/#&togetherjs=nhtT9oahiE~~ bearbeiten: falscher Link! Korrekter Link ist: https://jsfiddle.net/addlemanrachel/n9m8fjm8/. Hier

ist die 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>

Zuerst dachte ich, mein Problem war nicht die Verknüpfung jQuery aber nachdem ich, dass ich es immer noch nicht arbeiten bekommen. Vielen Dank im Voraus für die Hilfe! Ich bin so neu hier und bin mir nicht sicher, was ich falsch mache.

Quelle

2016-04-23 Rachel Addleman

Öffnen Ihres jsFiddle können Sie sehen Sie die folgende Fehlermeldung erhalten:

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

Sie diesen Fehler erhalten, weil jQuery eine Bootstrap-Abhängigkeit ist, so dass Sie sicher, müssen Sie es richtig ein.

Einschließlich jQuery v2.2.3 im jsfiddle Sie vorausgesetzt, es funktioniert jetzt

Working fiddle

ZUSÄTZLICHE ANMERKUNG:

Wenn Sie Bootstrap und jQuery in Ihre HTML-Seite müssen laden, nicht in jsfiddle müssen Sie die entsprechenden Ressourcen in Ihrem Tag in Ihrer HTML-Seite verknüpfen.

Zum Beispiel MaxCDN mit Links, die Sie den folgenden Code verwenden:

<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>

WICHTIG: Achten Sie darauf, die js Dateien in genau dieser Reihenfolge enthalten, jQuery erste dann Bootstrap.

Quelle

2016-04-23 15:46:21 fbid

Versuchen Sie, diese

<!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>

Quelle

2016-04-23 15:57:32

Schwierigkeit, Navbar zur Arbeit zu bekommen

Antwort

Verwandte Themen