Javascript 引导导航栏下拉列表在浏览器中不工作，代码笔正常_Javascript_Jquery_Twitter Bootstrap

Javascript 引导导航栏下拉列表在浏览器中不工作，代码笔正常

javascript jquery twitter-bootstrap

Javascript 引导导航栏下拉列表在浏览器中不工作，代码笔正常,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我有一个带有导航栏的文档，它的下拉菜单不起作用。它可以在我的中工作，但不能通过我的文本编辑器（Sublime）工作。我到处寻找解决办法，所以我在这里我试过： -引导文档 -确保jQuery脚本在Boostrap脚本之前 -三重检查我的闭包 -大量搜索Google和StackOverflow。 -添加此代码： <script> $("document").ready(function() { $(".dropdown").dropdown();

我有一个带有导航栏的文档，它的下拉菜单不起作用。它可以在我的中工作，但不能通过我的文本编辑器（Sublime）工作。我到处寻找解决办法，所以我在这里

我试过：
-引导文档
-确保jQuery脚本在Boostrap脚本之前
-三重检查我的闭包
-大量搜索Google和StackOverflow。
-添加此代码：

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


$（“文档”）.ready（函数（）{
$（“.dropdown”）.dropdown（）；
});

以下是我认为相关的代码。对我的错误的任何见解都将不胜感激

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


雅各布艺术品











...

那么，在

重新移动它之后，您还有额外的

。在您的脚本

下拉列表中，应指向切换

错误

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

删除文档和下拉列表中的

“

”。应该这样写

正确

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

问题是您使用了两种不同版本的引导。在标题中使用Bootstrap

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>


雅各布艺术品










...

控制台中是否有任何错误？谢谢。这个修好了！谢谢你的帮助。