web-dev-qa-db-ja.com

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

ドロップダウンを機能させるのに問題があります。ナビゲーションバーが完全に表示されるようにすることはできますが、「ドロップダウン」（どちらか一方）をクリックしてもドロップダウンメニューが表示されません。私はこれについて他の記事を調べてみましたが、みんなの問題を解決したものは何も助けになりませんでした。ブートストラップのWebサイトから直接ソースをコピーしましたが、自分のマシンで動作させることはできません。誰かアイデアがありますか？私は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 -->
javascriptjqueryhtmlcsstwitter-bootstrap
88
user2540528

たぶん試してみる

<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">

そしてそれが機能するかどうかを確認してください。

125
Chris

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

これが問題を解決した解決策です。以下を.jsファイルに追加してください。

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

100％実用的な解決策

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

正しい例

<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>
24
Hidayat ullah

次のように、ブートストラップの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>
12
Seyibabs

私はASP .NETフォームを使用していたときにこれに直面しました。私が使用した解決策は、マスターページの<asp:ScriptManager runat="server">からjQueryおよびBootstrap参照を削除またはコメントアウトすることでした。 <header>に入れたjQueryとBootstrapの参照と衝突するようです。

2
Mohammad AlShaabi

GetBootstrap.comによると、ドロップダウンはサードパーティのライブラリPopper.jsに基づいています。そのため、ドロップダウンメニューがクリックでは機能せず、ドロップダウンのホバーでのみ機能する場合は、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
nikhilmeth

たぶんそこから誰かがこれから利益を得ることができます：

要約（別名：tl; dr）

Django-bootstrap3バージョン6.2.2から11.0.0へのアップグレードのため、ブートストラップドロップダウンがドロップダウンしなくなりました。

バックグラウンド

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

症状

ローカルDjangoテストサーバーのサイトにアクセスすると、それは完璧にOKに見えました。一見したところ：navbarを含めて、期待どおりにbootstrapを使用したスタイル/レイアウト。ただし、すべてのドロップダウンメニューがドロップダウンできませんでした。

ブラウザコンソールにエラーはありません。静的なjsおよびcssファイルはすべて正常にロードされ、jqueryに依存している他のパッケージの機能は正常に機能していました。

溶液

このサイトはDjango-bootstrap3を使って構築されていましたが、私たちのローカルのpython環境の11.0.0パッケージは最新版の6.2.2にアップグレードされていました。

Django-bootstrap3==6.2.2にロールバックすることで問題は解決しましたが、何が原因なのかはわかりません。

1
djvg

それでも問題が解決しない場合は、ブラウザでページのソースを表示をチェックして、すべてのjqueryファイルとブートストラップファイルがロードされ、ファイルへのパスが正しいことを確認してください。最も重要な！必ず最新の安定版のjqueryファイルを使用してください。

1
Munam Yousuf

それはあなたのルートファイルのルートの問題だと思います。ブートストラップでもJQueryファイルでもありません。

0
Alvian Casablancas

私はRails 4.0を使っていて同じ問題に遭遇しました

これはテストに合格した私の解決策です

gemfileに追加

gem 'bootstrap-sass'

走る

bundle install

それからapp/assets/javascripts/application.jsに追加します。

//= require bootstrap

それからドロップダウンはうまくいくはずです

ちなみに、クリスの解決策も私のために働きます。

しかし、私はそれが資産パイプラインの考えにあまり適合していないと思います

0
user1143669

Rails 4にはもっとやるべきことがあるようです

  1. あなたの中にGemfileを追加します。

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

ここに見られるように

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

    $ bundle install

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

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

  1. 最後から2番目の直前にこれを追加

    config.assets.precompile + =％w（*。png * .jpg * .jpeg * .gif）

ここで見られるように ページの約20％下。

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

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

ここで見られるように 上記のタスクからもう少し下に

  1. そのファイルの中に

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

今すぐあなたのサーバーを停止して再起動し、すべてがうまくいくはずです。

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

誰かに役立つことを願っています！

0
Wes Duff

私のブートストラップバージョンは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-betaに変更

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

そしてそれは働き始めた

0
Siddaram H

私は上記のすべての答えを試しました、そして、私のために働く唯一のバージョンは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
Zeke

問題はhrefがhref = "＃"であることですあなたはすべてのタグでhref = "＃"を削除しなければなりません

0
Victor Jimenez

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

私は問題のあるChrome拡張機能の作者なので、拡張機能を修正することをお勧めします。

0
toddmo

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

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

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

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

  ],
0
ATEF CHAREF