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

ドロップダウンメニューが機能していないため、私がjavascriptブートストラップファイルを正しく実装していないと思われます。現在、プロジェクトフォルダにブートストラップが保存されています。他の作業サンプルコード（テストとしてコピーして貼り付けることさえしようとしています）を見て、メニューはドロップダウンしません。ブートストラップメニューのドロップダウンが機能しない

は、ここに私のコード

<head> 
    <link rel = "stylesheet" type = "text/css" href = "index.css"> 
    <link href = "bootstrap-3.3.6-dist/css/bootstrap.css" rel = "stylesheet"> 
</head> 
<body> 
    <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="index.html">Plethora</a> 
     </div> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img id = "menu" src="nav-icon.png"> </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Manage Interests </a></li> 
      <li><a href="#">Account Settings </a></li> 
      <li><a href="#"></a>Email Settings </li> 
     </ul> 
     </li> 
     </ul> 
    </div> 
    </nav> 

    <script type="text/javascript" src="bootstrap-3.3.6-dist/js/bootstrap.js"></script> 
</body>`

出典

2016-06-12 Marina Tassi

このhtmlページの現在のフォルダには、 "bootstrap-3.3.6-dist"というフォルダがありますか？そのパスはあなたのサイトではなく、このページに関連しているので、このページがあなたのホームページの場合は、パスの問題が起こりそうです。 – JonSG

マークアップがうまく動作です。 CSSまたはJSのいずれかを取得するときにブラウザコンソールに404がないかどうかチェックするか、またはCDNから取得します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
... 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

また、投稿したサンプルコードからJQueryが抜けています。これは、ブートストラップJavaScriptの前にある必要があります。コンソールの

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

例、FirefoxでFirebugのは、ここで404ingあなたのスクリプトファイルをチェック：

<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Plethora</a> </div> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img id = "menu" src="nav-icon.png"> </a> <ul class="dropdown-menu"> <li><a href="#">Manage Interests </a></li> <li><a href="#">Account Settings </a></li> <li><a href="#"></a>Email Settings </li> </ul> </li> </ul> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body>
：のCDNを使用して、

完全実施例
_{（runnable JSFiddle、外部リソース（ブートストラップCSSやJSとjQuery）}

は唯一のものではなく、上記で、あなたのサイトのCSSである点に注意してください、それがありますオフのチャンスを何かにそれなしにしようとする価値があるかもしれません他のすべてが失敗した場合、干渉します。

出典

2016-06-12 22:03:07 NikolaiDante

絶対パスではなく、CSSファイルとJSファイルの相対パスを使用しています。

たとえば、bootstrap-3.3.6-dist/css/bootstrap.cssは現在開いているページとの相対的な値なので、example.com/ice/creamになっていると、CSSファイルには実際にはexample.com/ice/cream/bootstrap-3.3.6-dist/css/bootstrap.cssが読み込まれます。 CSSに/bootstrap-3.3.6-dist/css/bootstrap.cssを使用している場合は、表示中のページに関係なく、常にexample.com/bootstrap-3.3.6-dist/css/bootstrap.cssから読み込まれます。

CSSとJSのすべての相対パスを切り替えてください。

編集：別のポスターが指摘しているように、ページ上にjQueryが表示されていないため、ほとんどのブートストラップ機能が動作するために必要です。

出典

2016-06-12 22:31:16 michael

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

答えて

関連する問題