web-dev-qa-db-ja.com

bootstrap "dropdown open"トグルは開発では正しく機能しませんが、本番環境では機能します

RailsTutorial sample_app をフォローしており、内部ではTwitter-boostrapフレームワークを使用しています。ドロップダウンメニューがあります （コード、jQuery） これは、開発環境では正しく機能しませんが、本番環境（Heroku）ではうまく機能します。

「ビジュアルイベント」の助けを借りて、メニュータイトルに関連するイベントがあることを確認しました。クラスを次のように変更するには、通常の動作をクリックする必要があります。

<li id="fat-menu" class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">

に：

<li id="fat-menu" class="dropdown open">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">

それでも、私の場合、クリックすると「開く」が追加され、同時に削除されます。変更が加えられていることにほとんど気づかなかったのですが、すぐに初期状態に戻ったため、ドロップダウンメニューが開きません。

ブラウザでコードを手動で編集し、クラスに「開く」を追加すると、メニューが開きます。次にメニュータイトルをクリックすると、「開く」が少し削除されてから、再び戻ります（最初のケースとは正反対です）。

私はそれが本番環境では機能するが、開発では機能しない（同じブラウザー上で）ことに非常に戸惑っています。何を確認すればよいですか？

ありがとう！

Vasil //最初の質問

jquerydrop-down-menutwitter-bootstrapruby-on-rails-3.2
18
VasilK

bootstrap-dropdown.jsのコードを2回ロードすると、この動作が発生します。 bootstrap-dropdown.jsとbootstrap.jsの両方をロードしていないことを確認してください。後者には前者が含まれます。

JSFiddle FAIL

リソースパネルからbootstrap-dropdown.jsを削除して再実行すると、機能します。

35
merv

（Rails 3.2）ローカルでプリコンパイルされたアセットを削除することでこの問題を解決しました-Heroku/Prodでは正常に機能しますが、devでは即座に開閉します。

rake assets:clean

3
tw airball

私はほぼ同じ問題を経験しました。しかし、バンドル（ASP.NET MVCプロジェクト）として1つのHTMLページにbootstrapとbootstrap.minjsファイルを同時にロードする原因になります。それらの1つを削除すると解決されました。

2
hsynlms

同じ問題が発生し、bootstrapドロップダウンが2回ロードされていたことが判明しました。この修正では+1！

Bootstrap-dropdown.jsはすべてのページで使用するため、グローバルにロードします。開発者の1人が、依存関係としてbootstrap.jsをウィジェットにロードしました。その結果、ドロップダウンは1ページを除くすべてのページで機能しました。追跡するのは少し大変で、最近ページで何が変わったのかを知らなければ、理解するのははるかに困難でした。

2
Jørgen

bootstrap -v 2.1から2.3に更新すると、問題が解決しました。

2
Shivam Bansal

私も同じ問題を抱えていました。しかし、それが起こったのは、いくつかの終了HTML要素を見逃したことだけでした。

0
Bhushan Lodha

私も同じ問題を抱えていました。プリコンパイルされたアセットが開発と本番で使用されていることを学びました。実稼働環境でキャッシュをテストしていましたが、開発に戻ると、ドロップダウンが機能しなくなりました。

本番環境から開発に戻るときは、コンパイルされたアセットを常にクリーンアップすることを忘れないでください。

0
emptywalls

これらの解決策はどれも私にはうまくいきませんでした。本番モードがこの問題の原因でした。たくさんの試行錯誤の結果、config.assets.debug = falseが原因で、gemファイルのセットアップに問題が発生していなかったことがわかりました。 trueに設定すると、エラーが発生し、「bootstrap-sass」gemがアセットグループ内にあるはずがないのに、その中にあることがわかりました。

したがって、この問題にぶつかり、このコメントまでたどり着いた人は、実稼働環境でconfig.assets.debug = trueを設定して、少なくとも正しい方向に向けられるかどうかを確認してください。

0
Jimeh