Question

我有一个带有导航栏的文档，其下拉菜单无法正常工作。它适用于我的codepen，但不适用于我的文本编辑器（Sublime）。我已经搜遍了所有的解决方案，所以我在这里。

我试过了：
-Bootstrap Docs
- 确保jQuery脚本在Boostrap脚本之前 - 检查我的闭包 - 搜索Google和StackOverflow的很多 - 添加此代码：

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

Answer 1

在</li>重新发送之后，你有额外的<a class = "dropdown-item" href = "#concrete">Concrete</a>。并且应在您的脚本dropdown-toggle中指出

<强> WRONG

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

删除文档中的""和.dropdown应该像这样写

<强> CORRECT

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

Demo With your code

Answer 2

问题是您使用两个不同版本的bootstrap引导程序。在你的标题中，你使用了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>

Bootstrap Navbar Dropdown无法在浏览器中运行，Codepen没关系

2 个答案: