2012-04-14 28 views
4

私はこれで私の頭を抜いています。ドキュメントはとてもシンプルに見えますが、私の人生では折りたたまれたナビゲーションバーを適切に/一貫して展開することはできません。展開するには2〜3回クリックする必要があります。また、「折りたたみ」アニメーションを再生した後にのみ行います。ブートストラップレスポンスナビ崩壊のトラブル

問題を特定しようとすると、私はこのページを作成しました。このページには、公開されているbootstrap nav HTMLと最小限の.jsがあります。

http://stats.thephish.fm/test.html

(同じNAVは、そのサイトのルートインデックスの上にあります)。

ご協力いただき誠にありがとうございます。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/> 
    <link href="css/my.css" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap-collapse.js"></script> 

</head> 
<body> 

    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="./index.html">Bootstrap</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class=""> 
       <a href="./index.html">Overview</a> 
       </li> 
       <li class=""> 
       <a href="./scaffolding.html">Scaffolding</a> 
       </li> 
       <li class=""> 
       <a href="./base-css.html">Base CSS</a> 
       </li> 
       <li class="active"> 
       <a href="./components.html">Components</a> 
       </li> 
       <li class=""> 
       <a href="./javascript.html">Javascript plugins</a> 
       </li> 
       <li class=""> 
       <a href="./less.html">Using LESS</a> 
       </li> 
       <li class="divider-vertical"></li> 
       <li class=""> 
       <a href="./download.html">Customize</a> 
       </li> 
       <li class=""> 
       <a href="./examples.html">Examples</a> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 



</body> 
</html> 

私はまた、headタグにこのスクリプトを追加しようとしている:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.collapse').collapse(); 
}); 
</script> 

が、私はこれを行う際に崩壊はまったく機能しません。

+0

ここに(関連する)コードと特定の質問を共有してください。 – PeeHaa

+0

申し訳ありません、それを貼り付けています。働いている* kind *なので、リンクされています。ちょうどその動作/アニメーションがナッツです。 – ehed

+1

bootstrap.jsとbootstrap-collapse.jsの両方が含まれていました。おっとっと。それを固定した – ehed

答えて

4

bootstrap.jsとbootstrap-collapse.jsの両方が含まれていました。おっとっと。すべてのプラグインは、デフォルトのjavascriptライブラリを拡張するアドオンであることを示すように見える、その隣に「ダウンロードファイル」と書いてあるので、これはちょっと混乱していると言わざるを得ない。

+0

私も同様に考えました。どちらがJSファイルの目的ですか?いつ私は、もう一方を使う必要がありますか? – cukabeka

関連する問題