4

私は自分のWebアプリでTwitterブートストラップを使用してすべてのスタイリングを行っており、ほとんどすべてが素晴らしいです。問題は、一度折りたたまれたナビゲーションバーが、ドロップダウンアイコンをクリックしてもドロップダウンしないことです。HTMLをリストしましたが、問題はjavascriptがまったく同じコードのフィドルとして表示されることにあると思います：http： //jsfiddle.net/YWUmb/30/は問題なく動作します。

<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="/">Exployre</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="/">Home</a></li>
              <li><a href="/profile">Profile</a></li>
              <li><a href="/sponsors">Sponsors</a></li>
              <li><a href="/working">Exployrers</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/share">Share</a></li>
              <li>
                    {% if user %}
                        User:  {{ user }}<br>
                        <a href="{{ logout }}">Logout</a>
                    {% else %}
                        <a href="/login">Signin or Register</a>
                    {% endif %}
              <li>  
                    <a href="/profile">
                    {% if visits %}
                        {% if visits > 10 %}
                        Prestige: {{ visits }}
                        {% elif visits > 5 %}

                        {% endif %}
                    {% endif %}
                    </a>
              </li>
              <li>        
                <form action="/search" class="navbar-search">
                  <div>
                    <input type="text" placeholder="Search" class="search-query" name="q" size="55"/>
                  </div>
                </form>

                <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
              </li>

            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
<script type="text/javascript" src="/static/js/bootstrap.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

ソースコードのリンクに何か問題がありますか、それを機能させるために必要な追加事項はありますか？

4

1 に答える 1

7

問題はあなたのjsの順序にあります。jQueryスクリプトが最初に実行され、ブートストラッププラグインが後に実行されます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.js"></script>
于 2012-07-06T03:19:36.503 に答える