Bootstrap Navbar Dropdown funktioniert nicht im Browser, Codepen OK

Ich habe ein Dokument mit einer Navigationsleiste, deren Dropdown-Menü einfach nicht funktioniert. Es funktioniert in meinem codepen, aber nicht durch meinen Texteditor (Sublime). Ich habe überall nach einer Lösung gesucht, also bin ich hier.Bootstrap Navbar Dropdown funktioniert nicht im Browser, Codepen OK

Ich habe versucht:
-bootstrap Docs
-Wir machen sicher Skript jQuery vor Bootstrap Skript
-Triple Überprüfung meiner Verschlüsse
-Viele Google und Stackoverflow zu suchen.
-Hinzufügen diesen Code:

<script> 
     $("document").ready(function() { 
     $(".dropdown").dropdown(); 
     }); 
    </script>

Hier ist, was ich glaube, dass der entsprechende Code sein. Irgendwelche Einblicke in meinen Fehler werden sehr geschätzt.

<!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"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>JakobiArtWorks</title> 
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel = "stylesheet"> 
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet"> 
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel = "stylesheet"> 
    <link href = "https://fonts.googleapis.com/css?family=Russo+One" rel = "stylesheet"> 
    <link href = "style.css" rel = "stylesheet"> 
</head> 

<body> 

<header> 
    <!--nav--> 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id = "top"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">JAW</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#art">Art</a> 
       <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Material 
     </a> 

     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#wire">Wire</a> 
      <a class="dropdown-item" href="#clay">Clay</a> 
      <a class="dropdown-item" href="#plywood">Plywood</a> 
      <a class = "dropdown-item" href = "#concrete">Concrete</a> 
     </div> 
      </li> 
     </li> 
    </ul> 
      <ul class = "nav navbar-nav navbar-right"> 
       <li><a href = "#">Contact</a></li> 
      </ul> 
    </div> 
</nav> 
<!--end nav--> 
</header> 

... 

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> 
    <script src = "script.js"></script> 
</body> 
</html>

Quelle

2017-05-26 Lisa Cee

Gibt es einen Fehler in der Konsole? – Nimish

Das Problem besteht darin, dass Sie zwei verschiedene Bootstrap-Versionen des Bootstrap verwenden. In Ihrer Kopfzeile verwenden Sie das CSS von Bootstrap 4.0.0-alpha.6 und am Ende Ihres Körpers haben Sie das JavaScript der Version 3.3.7. Sie können entweder das eine oder das andere, aber nicht beide zusammen verwenden.

Dieser Code funktioniert für mich:

<!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"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>JakobiArtWorks</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 
      integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"> 
</head> 

<body> 

<header> 
    <!--nav--> 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="top"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
       data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" 
       aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">JAW</a> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#art">Art</a> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" 
         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Material 
        </a> 

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="#wire">Wire</a> 
         <a class="dropdown-item" href="#clay">Clay</a> 
         <a class="dropdown-item" href="#plywood">Plywood</a> 
         <a class="dropdown-item" href="#concrete">Concrete</a> 
        </div> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
    <!--end nav--> 
</header> 

... 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" 
     integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" 
     crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" 
     integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" 
     crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" 
     integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 
     crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> 
<script src="script.js"></script> 
</body> 
</html>

Quelle

2017-05-26 20:30:18 manud99

Danke. Das hat es behoben! –

gut haben Sie zusätzliche </li> nach <a class = "dropdown-item" href = "#concrete">Concrete</a> reomove es. und in Ihrem Skript sollte dropdown-toggle spitzer sein

FALSCH

$("document").ready(function() { 
    $(".dropdown").dropdown(); 
    });

"" in dem Dokument entfernen und .dropdown es sollte wie dieses

RICHTIG

$(document).ready(function() { 
    $(".dropdown-toggle").dropdown(); 
    });

Demo With your code geschrieben werden

Quelle

2017-05-26 20:24:06

Danke für Ihre Hilfe. –

Bootstrap Navbar Dropdown funktioniert nicht im Browser, Codepen OK

Antwort

Verwandte Themen