4

私はこれの上に髪を引っ張ってきました。ドキュメントはそれをとても単純に見えるようにしますが、私は一生の間、折りたたまれたナビゲーションバーを適切に/一貫して拡張することはできません。展開するには2〜3回クリックする必要がありますが、これは「折りたたみ」アニメーションを再生した後にのみ実行されます。

問題を特定するために、ストックブートストラップナビゲーションHTMLと最小限の.jsを含むこのページを作成しました。これを機能させるために必要だと思います。

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

（同じナビゲーションがそのサイトのルートインデックスにあります）。

ヘルプをいただければ幸いです。

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

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

4

1 に答える 1

4

bootstrap.jsとbootstrap-collapse.jsの両方が含まれていました。おっと。すべてのプラグインの横に「ファイルのダウンロード」と表示されているため、これはやや紛らわしいと言わざるを得ません。これは、デフォルトのjavascriptライブラリを拡張するアドオンであることを示しているようです。

于 2012-04-15T02:19:25.907 に答える