Bootstrap Navbar下拉菜单在浏览器中不起作用，Codepen可以

Question

I have a document with a navbar whose dropdown menu just won't work. 我有一个带有导航栏的文档，该菜单的下拉菜单将无法使用。 It works in my codepen , but not through my text-editor(Sublime). 它可以在我的Codepen中工作，但不能通过我的text-editor（Sublime）工作。 I have searched all over for a solution, so here I am. 我到处都在寻找解决方案，所以我在这里。

I have tried: 我努力了：
-Bootstrap Docs -引导文档
-Making sure jQuery script is before Boostrap script -确保jQuery脚本在Boostrap脚本之前
-Triple checking my closures -三次检查我的关闭
-Lots of searching Google and StackOverflow. -搜索Google和StackOverflow的很多内容。
-Adding this code: -添加以下代码：

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

Here's what I believe to be the relevant code. 我认为这是相关的代码。 Any insights to my mistake will be greatly appreciated. 我的错误的任何见解将不胜感激。

<!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>

Answer 1

well you have extra </li> after <a class = "dropdown-item" href = "#concrete">Concrete</a> reomove it. 好吧，在<a class = "dropdown-item" href = "#concrete">Concrete</a>将其<a class = "dropdown-item" href = "#concrete">Concrete</a>之后，您会得到额外的</li> 。 and in your script dropdown-toggle should be pointed 并且在脚本中应该指向dropdown-toggle

WRONG 错误

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

remove "" in document and .dropdown it should be written like this 删除文档中的""并添加.dropdown，应这样写

CORRECT 正确

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

Demo With your code 演示与您的代码

Answer 2

The problem is that you use two different versions of bootstrap of bootstrap. 问题是您使用了引导程序的两个不同版本的引导程序。 In your header you use the CSS of Bootstrap 4.0.0-alpha.6 and on the end of your body you have the JavaScript of version 3.3.7 . 在标头中，使用Bootstrap 4.0.0-alpha.6的CSS，在正文的最后，使用JavaScript 3.3.7版。 You can either use one or the other but not both together. 您可以使用其中之一，但不能同时使用。

This code works for me: 该代码对我有用：

<!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>

Bootstrap Navbar下拉菜单在浏览器中不起作用，Codepen可以

问题描述

2 个解决方案

解决方案1
0 2017-05-26 20:24:06

解决方案2
0 已采纳 2017-05-26 20:30:18

Bootstrap Navbar下拉菜单在浏览器中不起作用，Codepen可以

问题描述

2 个解决方案

解决方案1 0 2017-05-26 20:24:06

解决方案2 0 已采纳 2017-05-26 20:30:18

解决方案1
0 2017-05-26 20:24:06

解决方案2
0 已采纳 2017-05-26 20:30:18