2017-05-26 11 views
0

ドロップダウンメニューが正しく動作しないナビゲーションバーがあるドキュメントがあります。私のcodepenで動作しますが、私のテキストエディタ(Sublime)では動作しません。私はすべての解決策を探してきたので、ここにいます。ブラウザで動作しないブートストラップのNavbarドロップダウンCodepen

私が試してみました:
-bootstrapドキュメントを
jQueryのスクリプトは、GoogleとStackOverflowの検索の
-Lots私のクロージャをチェック - トリプルブートストラップスクリプト
前であることを確認してください-Making。このコード-Adding

<script> 
     $("document").ready(function() { 
     $(".dropdown").dropdown(); 
     }); 
    </script> 

は、ここで私は、関連するコードであると信じるものです。私の間違いに対する洞察は非常に高く評価されます。

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset = "UTF-8"> 
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>JakobiArtWorks</title> 
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel = "stylesheet"> 
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet"> 
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel = "stylesheet"> 
    <link href = "https://fonts.googleapis.com/css?family=Russo+One" rel = "stylesheet"> 
    <link href = "style.css" rel = "stylesheet"> 
</head> 

<body> 

<header> 
    <!--nav--> 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id = "top"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">JAW</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#art">Art</a> 
       <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Material 
     </a> 

     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#wire">Wire</a> 
      <a class="dropdown-item" href="#clay">Clay</a> 
      <a class="dropdown-item" href="#plywood">Plywood</a> 
      <a class = "dropdown-item" href = "#concrete">Concrete</a> 
     </div> 
      </li> 
     </li> 
    </ul> 
      <ul class = "nav navbar-nav navbar-right"> 
       <li><a href = "#">Contact</a></li> 
      </ul> 
    </div> 
</nav> 
<!--end nav--> 
</header> 

... 

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> 
    <script src = "script.js"></script> 
</body> 
</html> 
+0

コンソールに誤りがありますか? – Nimish

答えて

0

問題は、ブートストラップのブートストラップの2つの異なるバージョンを使用することです。あなたのヘッダーには、ブートストラップ4.0.0-alpha.6のCSSを使用し、体の最後にはバージョン3.3.7のJavaScriptがあります。いずれか一方を使用することも、両方を同時に使用することもできません。

このコードは、私の作品:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>JakobiArtWorks</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 
      integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"> 
</head> 

<body> 

<header> 
    <!--nav--> 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="top"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
       data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" 
       aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">JAW</a> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#art">Art</a> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" 
         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Material 
        </a> 

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="#wire">Wire</a> 
         <a class="dropdown-item" href="#clay">Clay</a> 
         <a class="dropdown-item" href="#plywood">Plywood</a> 
         <a class="dropdown-item" href="#concrete">Concrete</a> 
        </div> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
    <!--end nav--> 
</header> 

... 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" 
     integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" 
     crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" 
     integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" 
     crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" 
     integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 
     crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> 
<script src="script.js"></script> 
</body> 
</html> 
+0

ありがとうございます。これはそれを修正しました! –

0

はよくあなたはそれreomove <a class = "dropdown-item" href = "#concrete">Concrete</a></li>余分に持っています。そして、あなたのスクリプトでdropdown-toggleは、文書内の""を削除し、それがこの

CORRECT

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

Demo With your codeのように記述する必要があります.dropdown

WRONG

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

を指摘しなければなりません

+0

ご協力ありがとうございます。 –

関連する問題