2017-05-26 117 views
0

我有一個導航欄文檔,其下拉菜單不起作用。它適用於我的codepen,但不是通過我的文本編輯器(Sublime)。我已經搜索了一個解決方案,所以我在這裏。Bootstrap導航欄下拉菜單不能在瀏覽器中工作,Codepen好的

我曾嘗試:
-Bootstrap文檔
-Making確保jQuery腳本的自舉腳本
- 三檢查我的關閉谷歌搜索和StackOverflow上的
-Lots之前。
-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

問題是您使用兩種不同的bootstrap引導版本。在你的頭文件中,你使用引導程序的CSS 4.0.0-alpha.6,並且在你身體的最後你有版本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

以及你有額外的</li><a class = "dropdown-item" href = "#concrete">Concrete</a> reomove之後。在你的腳本dropdown-toggle應當指出

WRONG

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

在文檔中刪除""和.dropdown應該這樣寫

正確

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

Demo With your code

+0

感謝您的幫助。 –

相關問題