您的位置: 首页  >  技术问答  >  Bootstrap导航栏下拉菜单不能在浏览器中工作，Codepen好的

Bootstrap导航栏下拉菜单不能在浏览器中工作，Codepen好的

分类: 技术问答 • 2022-05-28 08:33:52
问题描述：

我有一个导航栏文档，其下拉菜单不起作用。它适用于我的codepen，但不是通过我的文本编辑器（Sublime）。我已经搜索了一个解决方案，所以我在这里。Bootstrap导航栏下拉菜单不能在浏览器中工作，Codepen好的

我曾尝试：
-Bootstrap文档
-Making确保jQuery脚本的自举脚本
- 三检查我的关闭谷歌搜索和*上的
-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

答

问题是您使用两种不同的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

谢谢。这固定它！ –

答

以及你有额外的</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

感谢您的帮助。 –

相关推荐