导航栏切换器无反应问题答案

【问题标题】：Navbar toggler no reaction issue导航栏切换器无反应问题
【发布时间】：2020-08-29 02:10:43
【问题描述】：

我有这个导航栏 - 一切正常，但有一点是错误的 - 在移动设备上，当你看到导航栏切换器图标时 - 你点击它 - 导航栏下拉并显示，但是当你再次点击时 - 没有响应.您需要至少单击两次，有时需要单击更多才能再次关闭下拉菜单。问题出在哪里？谢谢

<section id="nav">
<nav class="navbar navbar-expand-md navbar-light bg-dnsa sticky-top">
<div class="container padding">
    <a class="navbar-brand logo" href="index.html"><img src="img/logo.png" class="logoo"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
       <ul class="navbar-nav ml-auto">
          <li class="nav-item">
             <a class="nav-link" href="#">O nás</a>
          </li>
          <li class="nav-item">
             <a class="nav-link" href="#">DAS"DAL</a>
          </li>
          <li class="nav-item">
             <a class="nav-link" href="#">Formulář pro objednávku</a>
          </li>
          <li class="nav-item">
             <a class="nav-link" href="#">Kontakt</a>
          </li>
       </ul>
    </div>
  </div>
 </nav>
 </section>

【问题讨论】：

标签： navbar

【解决方案1】：

代码似乎没问题，请检查您是否在 HTML 文件的头部包含了 CSS CDN：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

以及结束正文标记之前的引导 JS 脚本：

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

应该是这样的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
            integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
            crossorigin="anonymous"
        />
        <title>Document</title>
    </head>
    <body>
        <section id="nav">
            <nav
                class="navbar navbar-expand-md navbar-light bg-dnsa sticky-top"
            >
                <div class="container padding">
                    <a class="navbar-brand logo" href="index.html"
                        ><img src="img/logo.png" class="logoo"
                    /></a>
                    <button
                        class="navbar-toggler"
                        type="button"
                        data-toggle="collapse"
                        data-target="#navbarNavDropdown"
                        aria-controls="navbarNavDropdown"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                    >
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div
                        class="collapse navbar-collapse"
                        id="navbarNavDropdown"
                    >
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">O nás</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">DAS"DAL</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"
                                    >Formulář pro objednávku</a
                                >
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Kontakt</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </section>

        <script
            src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

如果您没有使用 CDN 将 CSS 链接和 JS 脚本获取到 HTML 文件中，请尝试重新下载并替换 CSS 和 JS 文件夹。

如果你仍然有问题，我担心问题是你的电脑太慢了？在您检查我指出的问题后，我们可以讨论。

【讨论】：

【解决方案2】：

是的，我正在使用 CDN，我没有在标记之前获得这些脚本，所以我添加了它们。但没有变化。我百分百肯定，这与速度无关。因为我是在手机上测试的，还蛮新的。

我注意到一件事 - 当我单击 2 次时，它会快速关闭和打开，但仍然 - 当我单击一次时 - 即使我等待也没有。

【讨论】：

【解决方案3】：

现在这真的很有趣，因为在我的笔记本和手机上一切正常...代码绝对没有错。

让我们分析一下问题 - 它必须在您通过 CDN 引入的脚本标签中，因为这些是折叠行为背后的原因（具体来说是第一个和最后一个）。

检查这两个脚本标签是否与此处完全相同：
BootstrapCDN 部分中的https://getbootstrap.com/。

如果这不起作用，请尝试放弃 CDN 并从此处下载已编译的 JS： https://getbootstrap.com/docs/4.5/getting-started/download/

下载文件后，将它们复制到项目目录中，并通过带有 src 属性的脚本标签包含它们，就像包含 CDN 一样。

如果这不起作用，那肯定是我无法解决的内心问题。

【讨论】：