2016-10-05 19 views
1

ブートストラップからNavbarボタンを使用しようとすると、機能しません。ブートストラップナビバーの折りたたみが機能しない

私はそれがjQueryライブラリなどをロードするページと何か関係があると思いますが、わかりません。

ここに私のコードです。問題がどこにあるのかが分かっているので、私は頭とナビゲーション部分だけを表示します。他のすべては単純なHTML構造です:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1"> 
    <!--Boostrap jQuery--> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjsmfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
     crossorigin="anonymous"></script> 
    <!--Boostrap--> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
     crossorigin="anonymous"> 
    <!--Favicon--> 
    <link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" /> 
    <!--Mi CSS--> 
    <link rel="stylesheet" type="text/css" href="index.css"> 

    <!-- p5.js--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script> 
    <script src="js/sketch.js" type="text/javascript"></script> 

    <title>Festival Sonorum</title> 
</head> 

<body> 
    <!-- navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" 
        aria-controls="navbar"> 
      <span class="sr-only">Navegación</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
       <a class="navbar-brand" href="index.html">Festival Sonorum</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="programa.html">Programa</a></li> 
        <li><a href="#acerca">Acerca</a></li> 
        <li><a href="#contacto">Contacto</a></li> 
        <li><a href="#galeria">Galería</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Artistas <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 class="dropdown-header">Nav header</li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <!--/.nav-collapse --> 
     </div> 
    </nav> 
    <!--fin del navbar--> 

私には何かが欠けていますか?ライブラリの読み込みと同じですか?

+0

こんにちは@dawn :)あなたが私の答えが役に立ったと評価していた場合は、[それを受け入れる&アップ投票]してください(します。https://メタそれはあなたがそれを修正して、少なくともバージョンのjQueryの1.9.0を追加する必要が動作するように.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) –

答えて

2

ブートストラップにはjQueryが含まれていないので、自分で追加する必要があります。 bootstrap.jsスクリプトの直前に追加してください。 Bootstrap's docs 1として

:その上で

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

、整合性チェックは、あなたのbootstrap.min.jsスクリプトに失敗しました。

... 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 

<!--Boostrap jQuery--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
... 
+0

まだ動作しません – dawn

+1

こんにちは@dawn、明らかに 'bootstrap.min.js'はcdnの完全性チェックに失敗していました。読み込み中。私は答えを更新し、それのための

関連する問題