2016-06-06 7 views
0

Ich möchte eine Navbar mit einem Dropdown-Menü für Mobiltelefone erstellen. Ich habe dies für einige andere Websites getan und es hat immer gut funktioniert.Drop-Down-Menü Bootsrap 3 funktioniert nicht

Jetzt ganz plötzlich hörte es auf zu arbeiten und ich frage mich, warum ..

Dies ist der Code:

<head> 
    <title>TODO supply a title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
</head> 


<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <a href="" class="navbar-brand">Marco Koopman</a> 

      </div> 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="">About me</a></li> 
        <li><a href="">My school</a></li> 
        <li><a href="">My skills</a></li> 
        <li><a href="">More info</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 


    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"/> 

</body> 
+1

'jQuery' müssen sonst alle Bootstrap js zur Arbeit gehen an erster Stelle, um nicht ... –

Antwort

1

jQuery muss zuerst um und richtigen schließen script Tags als Ihren zweiten script Tag kommen ist nicht richtig geschlossen.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<head> 
 
    <title>TODO supply a title</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 

 

 
<body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 

 
       <a href="" class="navbar-brand">Marco Koopman</a> 
 

 
      </div> 
 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li><a href="">About me</a></li> 
 
        <li><a href="">My school</a></li> 
 
        <li><a href="">My skills</a></li> 
 
        <li><a href="">More info</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 

 

 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
</body>

+0

Hey! Dies funktioniert dank :) –

+0

@Marco Sie sind willkommen) –