ブートストラップのドロップダウンメニューが機能しない（クリックしたときにドロップダウンしない）

私はブートストラップでグリップを得ようとしているが、ほとんど成功していない。私はちょうど私がhtmlページに直接HTMLをコピーしただけのコピーを使用してWebページと同じ順序でCSSやJSファイルを参照したブートストラップのドロップダウンメニューが機能しない（クリックしたときにドロップダウンしない）

http://getbootstrap.com/examples/jumbotron/

作業このテンプレートのローカルバージョンを取得しようとしています私のマシンでの最新のダウンロード。しかし、ドロップダウンの横にある矢印をクリックすると（つまりメニューは表示されません）、

私はjsfiddleでコードを再現しようとしましたが、さらに悪化し、メニューが正しく表示されません。 http://jsfiddle.net/andieje/kRX6n/

ここは私のページの出力です。私は、あまりにも

<!DOCTYPE html> 
<html> 
<head><title> 
    Untitled Page 
</title><link href="styles/bootstrap.css" rel="stylesheet" /> 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="JavaScript/html5shiv.js"></script> 
     <script src="JavaScript/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
       <input type="text" placeholder="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <input type="password" placeholder="Password" class="form-control"> 
      </div> 
      <button type="submit" class="btn btn-success">Sign in</button> 
      </form> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </div> 



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

<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" /> 

</body> 
</html>

ドロップダウンJSが含まれて私もこのコードを追加しようとしたが無駄だっ

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    </script>

出典

2013-08-20 user2274191

あなたは 'bootstrap.min.js'ファイルが期間ではなくダッシュを使用していないことを確認していますか？私は今、ソースを見ていると、その期間を使用しています。 – Kristian

hi - 私のファイルの名前はダッシュで、ピリオドではありません。お返事ありがとうございます – user2274191

にちょうどここtype="text/javascript"

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

を削除するアップデートです - http://jsfiddle.net/andieje/kRX6n/

出典

2013-08-21 07:12:22

お返事ありがとうございます。私は同じ問題に直面していたし、あなたのソリューションは働いた。しかし、あなたはhainv 'text/javascript'の問題は何かを説明できますか？ – user2243747

これは、奇妙な問題の奇妙な修正です（しかし、それは働いた！） – contactmatt

それは私のためにも働いた！しかし、それは奇妙なhahaと聞こえる – erginduran

私は同じ問題に直面して、解決策は私のために働いた、それがうまくいくことを願って君も。

<script src="content/js/jquery.min.js"></script> 
<script src="content/js/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.dropdown-toggle').dropdown(); 
    }); 
</script>

注文をシャッフル場合、それは動作しません、「bootstrap.min.js」ファイルの前に「jquery.min.js」ファイルを含めてください。

出典

2014-04-03 14:30:33 ashishSober

$（ '。ドロップダウントグル'）を追加します。私の問題を解決しました。 – Murat

注文が関係しているようです。 with Flask-BootstrapにはJinja2のテンプレートbootstrap/base.htmlがあります。これはまさにこの順序です。私の場合、私はこれを認識せず、スクリプトをサブテンプレートに再度含めました。これは明らかにashishoberによって記述された注文問題のためドロップダウンを破った。 – bvanlew

$（ '。dropdown-toggle'）を追加して問題を解決しました。ありがとう –

bodyタグを開いた後、これらのファイルを両方とも追加してください。 Bodyタグの後ろのどこにでも 'Bodyタグの後にのみ'を覚えておいてください。 bodyタグの中に下記のファイルを追加すると、あなたの問題は未解決です。

ボディータグの終わりの前後に貼り付けてください。これは100％動作します。私はテストし、それを働かせた！

出典

2015-03-19 18:52:26

-2

私は次のスクリプトを削除して同じ問題を抱えていました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

出典

2016-06-24 22:20:12

このスクリプトを自分のコードに追加すると、ドロップダウンメニューが修正されました。

<script> $(document).ready(function() { $('.dropdown-toggle').dropdown(); }); </script>

出典

2016-08-29 22:54:42

ブートストラップのドロップダウンメニューが機能しない（クリックしたときにドロップダウンしない）

答えて

関連する問題