ブートストラップドロップダウンメニューが機能しない


100

ドロップダウンを機能させるのに問題があります。ナビゲーションバーを完全に表示することはできますが、[ドロップダウン](どちらか)をクリックすると、ドロップダウンメニューが表示されません。私はこれについて他の投稿を調べてみましたが、誰の問題も解決するものは何もありませんでした。ブートストラップのウェブサイトから直接ソースをコピーしましたが、自分のマシンで動作させることができないようです。誰かアイデアはありますか?私はそれを1時間じっと見ていましたが、何が問題なのか理解できません。

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-    target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="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>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <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><!-- /.navbar-collapse -->


1
申し訳ありませんが、私がこれを書いたとき、職場で。説明を編集しました。
user2540528 14年

リンクをいただけませんか?@ user2540528
STP38

JSファイルへのリンク?
user2540528 14年

1
私はあなたのコードをコピーしてjs / cssを追加しました。それは私のマシンで動作します
Chris

「ソースをブートストラップのウェブサイトから直接コピーしました」@ user2540528、そのリンクを教えてもらえますか?
STP38 14年

回答:


142

たぶん

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

それがうまくいくかどうかを確認してください。


これで終わりました。ローカルファイルが機能しない理由は何ですか?そして、これをドメインにデプロイした場合、これらのjsソースは正しいですか?完成させて公開した後もアプリが機能することを確認したいだけです。(これが私の最初のものなので、私が尋ねる理由です)
user2540528 14年

@ user2540528おそらくファイルの名前が異なるjquery-1.11.0.jsか、ファイルがまったくありません。
Chris

user2540528 bootstrap.cssを見逃しているようです
Avec

1
私の問題は、私が正しい場所にbootstrap.cssを持っていたということでしたが、私のバンドルに含まbootstrap.min.jsを持っていなかった
codingNightmares

これらのコード行の順序も重要であることに気付きました。コードの最後の行としてgoogle apiを配置すると、機能しません。
EfeBüyük17年

114

私はブートストラップ+ Railsプロジェクトを持っていて、ドロップダウンはうまくいきました。更新後、動作を停止しました...

これは問題を解決したソリューションです。.jsファイルに以下を追加してください:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});

Bootstrap 3とRails 4.2で私が抱えていた問題が解決しました。ドロップダウンが最初にのみ機能し、2回目のクリックでは機能しませんでした。
ボベンダー

Grailsプロジェクトw / Spud CMS-これにより、ドロップダウン切り替えの問題が解決しました。
タイラーラファティー2016年

本当にありがとうございました1.誰もが「ブートストラップの前にjqueryを追加する」と言っています。そんな感じでした。これは彼らが答えただけであり、1時間以上探した後、うまくいった!
MaNTiS 2016年

1
これは非常に役に立ちました。この修正が必要な理由は何ですか?
ブラック2017

1
この解決策は私にとってうまくいきました。私のサイトにブートストラップを2回インポートしたことがわかりました。1回だけインポートした後、このソリューションの修正なしで動作し始めました。
harshpatel991 2017

27

100%作業ソリューション

すべてのjsおよびcssリンクの最初にJqueryリンクを配置するだけです

正しい例

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

例が間違っています!

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>

私の場合はうまくいきませんでした。Iwan B.のソリューションを使用する必要がありました。
toddmo 2017年

1
@Nabinこれが機能するのは、ブートストラップがjqueryを使用するため、最初にjqueryをロードしてからブートストラップを実行する必要があるためです
Siddaram H

@toddmo動作します。jquery、bootstrap、cssをチェックして、Google Croome dbuggerのnetworyタブから正しく読み込まれたかどうかを確認してください
LMK

12

次のように、ブートストラップjsリンクの前にjquery jsリンクを配置します。

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

の代わりに:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

Put the jquery css ...>Put the jquery js ...
allcaps

2
あなたの言葉は正しいですが、コードブロックはあなたが言うことの反対です。
Astra Bear

4

getBootstrap.comによると、ドロップダウンはサードパーティのライブラリPopper.jsに基づいて構築されています。したがって、ドロップダウンメニューがonclickで機能せず、ドロップダウンのホバーでのみ機能する場合は、popper.js、bootstrap.js、bootstrap.cssを含めます。ブートストラップバンドルを含める前にpopper.jsを含めないことが理由の1つである可能性があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>

https://getbootstrap.com/docs/4.0/components/dropdowns/


1
バージョン4の場合、これは答えです。これは、プロジェクトにJqueryとブートストラップのみを含めるために使用されている場合の大きな変更です。
Vindic

1
はい、順序は本当に重要です。
nikhilmeth

これは私のために働いたものです。ブートストラップ・ページから同じコードをコピーしたが、これは彼らがあるべき正しい順序である。
DuckRodgers

3

私はASP .NETフォームを使用しているときにこれに直面しました。私が使用したソリューション<asp:ScriptManager runat="server">は、マスターページのからjQueryおよびBootstrap参照を削除またはコメント化することでした。これは、に配置したjQueryおよびBootstrap参照との競合を引き起こすようです<header>


2

まだ同じ問題が発生している場合は、ブラウザーでビューページのソースをチェックして、jqueryファイルとブートストラップファイルがすべて読み込まれているか、ファイルへのパスが正しいかどうかを確認してください。最も重要な!最新の安定したjqueryファイルを使用してください。


2

多分そこにいる誰かがこれから利益を得ることができます:

概要(別名tl; dr)

ブートストラップのドロップダウンメニューからアップグレードすることにより落下停止しdjango-bootstrap3たバージョン6.2.211.0.0

バックグラウンド

からにdjango大きく依存しているレガシーサイトでも同様の問題が発生しました。このサイトは常に問題なく機能し、本番環境でも引き続き機能しましたが、ローカルのテストシステムでは機能しませんでした。コードに関連する明らかな変更はなかったため、依存関係の問題が発生する可能性が最も高かった。bootstrapdjango-bootstrap3

症状

ローカルのdjangoテストサーバーのサイトにアクセスすると、一見したところ完全に問題なく見えました。bootstrapた。navbarを含め、は期待どおりにされています。ただし、すべてのドロップダウンメニューがドロップダウンに失敗しました。

ブラウザコンソールにエラーはありません。すべての静的ファイルjscssファイルが正常に読み込まれ、依存している他のパッケージの機能はjquery期待どおりに機能していました。

解決

これは、ことが判明しdjango-bootstrap3、私たちの地元のPython環境でのパッケージには、最新バージョンにアップグレードされた11.0.0サイトを使用して構築されたのに対し、6.2.2

django-bootstrap3==6.2.2問題を解決するためにロールバックしましたが、正確な原因はわかりません。


1

Rails 4.0を使用していますが、同じ問題に遭遇しました

これはテストに合格した私のソリューションです

Gemfileに追加

gem 'bootstrap-sass'

走る

bundle install

次にapp / assets / javascripts / application.jsに追加します

//= require bootstrap

その後、ドロップダウンが機能するはずです

ちなみに、Chrisのソリューションも私にとってはうまくいきます。

しかし、それはアセットパイプラインのアイデアにあまり適合していないと思います


0

Rails 4にはまだやるべきことがあるようです。

  1. Gemfileの中に追加します。

    gem 'bootstrap-sass'、 '〜> 3.2.0.2'

ここに見られるように

  1. 次に、実行する必要があります

    $ bundleインストール

これは誰も言及していない部分です

config / application.rbファイルを開きます

  1. 最後から2番目の最後の直前に追加します

    config.assets.precompile + =%w(*。png * .jpg * .jpeg * .gif)

ここに表示されているように、ページの20%ほど下がっています。

  1. 次に、このディレクトリにcustom.css.scssファイルを作成します

    アプリ/アセット/スタイルシート

ここに見られるように上記のタスクからさらに少しダウンを

  1. そのファイル内に含める

    @import "ブートストラップ";


サーバーを停止して再起動すると、すべてが正常に動作します。

宝石を使わずにブートストラップを実行しようとしましたが、うまくいきませんでした。

それが誰かを助けることを願っています!



0

私の場合、Chrome拡張機能を無効にすると修正されました。犯人が見つかるまで、Chromeから1つずつ削除しました。

私は問題のあるChrome拡張機能の作成者なので、拡張機能を修正した方がいいと思います。


0

私のブートストラップバージョンはbootstap4-alphaを指していた、

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>

4ベータに変更

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

そしてそれは働き始めました



0

Bootstrap 4の場合、追加のライブラリが必要です。ブラウザコンソールを読むと、Bootstrapは実際に、ドロップダウンが機能するために必要であることを通知するエラーメッセージを出力します。

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

0

角度プロジェクトでは、angular-cli.jsonまたはangular.jsonのこれらの行を追加します。

      "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ],

0

私は上記のすべての答えを試しましたが、私のために機能する唯一のバージョンはjquery 1.11.1です。私は他のすべてのバージョンで試してみました1.3.2、1.4.4、1.8.2、3.3.1およびナビゲーションバーのドロップダウンの仕事をしません。

<script src="jquery/jquery-1.11.1.min.js"></script>

0

Ruby on Railsで問題に直面した場合、完全なソリューションはBootstrap Ruby Gem readmeファイルによって提供されます

要するに:

  1. 名前application.cssを変更application.scss
  2. 追加 @import "bootstrap";
  3. 存在gem 'jquery-rails'Gemfileない場合は追加してください。
  4. に追加//= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprocketsapplication.jsます。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.