2

http://twitter.github.com/bootstrap/javascript.html#dropdownsの指示に従って、ナビゲーションバーのドロップダウンリストを有効にしましたが、失敗しました。ドロップダウンリストが表示されないようです。私のコードもウェブサイトのデモと同じです。誰かが私がこれを解決するのを手伝ってもらえますか？以下はコードです：

<ul class="nav">
    <li class="dropdown" id="d1">
            <a class="dropdown-toggle" data-toggle="dropdown" href="d1"  >
                Sub-User Management
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href=<%=subusers_url%>>Sub-Users</a></li>
                <li><a href=<%=monitor_records_url%>>Monitors</a></li>
                <li class="divider"></li>
            </ul>
        </li>
    </ul>

application.js

$('.dropdown-toggle').dropdown()
4

9 に答える 9

3

この質問をする他の多くの人のように、私はこれを理解しようと何時間も費やしました。ドロップダウンが機能しない場合の問題は次のとおりです。

私はブートストラップに不慣れで、私の場合、ここでモデルとしてブートストラップデモを使用していました。

ブートストラップデモ

しかし、基本的なブーストラップのインストールに従った後でのみ。

したがって、「bootstrap.js」ファイルをインストールしました。コードを確認し、このデモでは一連のjsスクリプトがドキュメントの最後にありますが、デフォルトの「bootstrap.js」はそれらの1つではないことに注意してください。ドロップダウンを削除すると、ドロップダウンが正しく機能しました。

'bootstrap.js'を保持し、他のものを取り除く場所で逆に機能する可能性もあります。これはより良い解決策かもしれません。

これが私のような他の貧しい野郎に役立つことを願っています。すべてのプロジェクトにご多幸をお祈りします。

于 2012-11-29T00:09:45.790 に答える
1

見た目は良さそうですが、ドロップダウンメニューのリンクを引用符で囲んでみてください。
私も最初hrefをただに変更しました"#"

<ul class="nav">
    <li class="dropdown" id="d1">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"  >
                Sub-User Management
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="<%=subusers_url%>">Sub-Users</a></li>
                <li><a href="<%=monitor_records_url%>">Monitors</a></li>
                <li class="divider"></li>
            </ul>
    </li>
</ul>

また、bootstrap-dropdown.jsファイルが含まれていることを確認してください。

于 2012-08-11T04:55:00.923 に答える
0

コードをコピーしてjsfiddleに貼り付けたところ、ドロップダウンが機能します... http://jsfiddle.net/hajpoj/Hf8Xw/3/

ですから、問題は別のものだと思います。boostrap-drodown.jsがページによってロードされていることを再確認します（ページのソースを表示し、実際にhtmlソースにこの行が表示されていることを確認します）。

<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>

また、サーバーを再起動したり、アセットのソースパスを確認したりしてみてください。

于 2012-08-12T19:09:10.980 に答える
0

私はついにこの問題を解決することができました！私のコードはすべて完璧です。Railsでアプリケーションを作成しているときに、いくつか変更する必要がありました。

Rails（開発モード）の場合、application.jsで、ブートストラップを呼び出す前にjqueryを呼び出す必要があります。

//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require_tree .

ただし、Rails（本番モード）の場合、application.jsでは、jqueryを呼び出す前にブートストラップを呼び出す必要があります。

//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require_tree .

しかし、私はまだそれがなぜそうなのかを研究しています。とにかく、うまくいきます!! :)

于 2012-08-13T16:35:12.777 に答える
0

実際、「data-toggle = "dropdown"」を含めるので、「$（'。dropdown-toggle'）。dropdown（）」は必要ありません。これら2つは同じことを行いました。

そして、それに基づいてjQuery.js、bootstrap.jsをインポートすることを忘れないでください！

于 2013-02-07T02:26:22.900 に答える
0

最新のJQueryを使用していることを確認してください

于 2013-05-11T12:59:46.130 に答える
0

rails3アプリでは、ドロップダウンに関連するすべてのコードを切り取り、このコードをdropdown.jsという新しいファイルに貼り付けてから、このファイルをapplication.jsに必要とします。これにより、開発中および生産も。本番環境でjqueryの前にbootstrap.jsを要求すると（上記のuser192249のように）、jsを使用するアプリの他の部分が破損する可能性があります。

于 2013-09-03T07:44:30.627 に答える
0

WordPressサイトでBootstrapを使用しても同じ問題が発生していました。実際、私のコードに次のようなjavascript.jsファイルを含めたためです。

<script src="js/bootstrap.min.js"></script>

私がしなければならないことは、代わりに次のように書くことです：

<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>

したがって、Bootstrapのjavascript.jsファイルが正しく含まれていることを確認してください。

于 2014-04-03T23:23:27.917 に答える
-1 
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>

このコードを見てください。おそらくページの最後で、srcリンクを変更する必要があるかもしれません。その後、おそらくそれは動作します。

于 2014-12-24T02:13:38.107 に答える