-1

ツイッターブートストラップを使用してナビゲーションバー内でドロップダウンを機能させることができません。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <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>     
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Dropdown <b class="caret"></b></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 class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </div><!--/.navbar-inner -->
</div><!--/.navbar -->

頭に含まれているjavascriptは次のとおりです。

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script> 
    <script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
    ...

それで、jqueryはbootstrap.jsの前に含まれています、私が欠けているものは何ですか？私が間違っていることは何ですか？

編集：application.jsをクリーンアップしたので、ヘッドは次のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
...

そして今、上向きの白い三角形が表示されます。これは以前は表示されていませんでしたが、ドロップダウン全体は表示されません...

ここに画像の説明を入力してください

4

2 に答える 2

1

  1. 隔離された環境でマークアップを確認してください: http://jsfiddle.net/handtrix/9992A/ (良さそうです)

  2. ページの下部に Javascript ファイルを含める必要があるかもしれません。

  3. 足場 ( $ rails g controller ...) を使用しましたか? はいの場合は、Rails scaffold ジェネレーターが、ブートストラップ css を台無しにする css ファイルを追加することが多いことを覚えておいてください。それらを削除してみてください。

  4. ブラウザのキャッシュをクリアする

于 2013-02-14T23:20:43.490 に答える
0

問題は、次のようなレイアウトで使用していた Twitter ブートストラップ モーダルであることが判明しました。

<div class="modal fade" id="modal_terms">

その代わりに、次のように変更しました。

<div class="modal hide" id="modal_terms">

そして、それはすべて適切に機能しています。これが他の誰かに役立つことを願っています

于 2013-04-29T23:05:47.920 に答える