导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用

IT技术 javascript html css twitter-bootstrap bootstrap-5
2021-01-29 21:52:08

我在尝试使用Bootstrap 5.Everything创建响应式菜单或下拉按钮时遇到问题。导航图标和下拉图标出现。但它不起作用。当我单击nav图标或dropdown按钮时，没有dropdown menu出现。

我想特别提一下，我也包含了该jquery文件。但它没有用。谁能告诉我这里发生了什么？

最后一件事，我在其他一些bootstrap类中遇到了严重的问题，比如mr-auto，ml-auto等等bootstrap 5。这种工作是否有任何错误或新类？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <a href="#" class="navbar-brand">DemoTech</a>
            <button
                class="navbar-toggler"
                data-toggle="collapse"
                data-target="#navbar"
            >
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse" id="navbar" navbar>
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </nav>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

6个回答

所述data-*自举4使用的属性已被替换为data-bs-*在自举5

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

演示

正如文档中所解释的，所有 JavaScript 插件的数据属性现在都有命名空间，以帮助将 Bootstrap 功能与第三方和您自己的代码区分开来。这意味着任何 javascript 组件（Collapse、Navbar、Carousel、Dropdown、Tabs、Modal 等）只能使用data-bs-...属性工作。

Bootstrap 5 是具有重大更改的重大更新。此外在这里看到的是/已更改为/ 。ml-automr-automs-autome-auto

这应该是公认的答案。官方文档（测试版）目前给出了一个没有命名空间data属性的错误示例。
2021-03-21 21:52:08
实际上，官方文档确实做得对（当然）。我在 devdocs.io 上绊倒了，在那里我启用了 BS4 文档而不是 BS5 文档，所以要注意这一点。
2021-04-07 21:52:08

确保您已经在 head 标签中为 Javascript 和 CSS 添加了来自引导主页的 jsDeliver CDN 链接。

**<!-- CSS only -->**
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

**<!-- JavaScript Bundle with Popper -->**

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
可以通过其他支持信息来改进您的答案。请编辑以添加更多详细信息，例如引文或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心找到有关如何编写好的答案的更多信息。
2021-03-22 21:52:08

您已经使用了旧 bootsrap 版本中使用的“data-toggle”这个属性，而在 bootstrap 5 中您需要使用这个属性“data-bs-toggle”，另外一件最重要的事情是您已经 make (aria-expanded = "true" )

我正在编辑的当前站点中的下拉菜单有问题。今晚我终于有了一个带有下拉菜单的导航菜单，它允许在单击链接后关闭下拉菜单！我通过不同的模板将它设计成看起来很棒。但是，当我将菜单添加到我正在编辑的站点时，移动切换菜单不会打开。我该如何解决？谢谢！:--)

<!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center">
    <div class="container">
      <div class="header-container d-flex align-items-center justify-content-between">
          
        <div class="logo">
            
          <!--<h1 class="text-light"><a href="index.html">LOGO TEXT</a></h1>-->
          
          <!-- Uncomment below if you prefer to use an image logo -->
          
          <a class="scrollto" href="#intro"><img src="img/UCF-Logo.svg" height="50" alt="U C F" title="U C F" class="img-fluid top-logo wow bounceOut"></a>
          
          <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
        </div>

        <nav id="navbar" class="navbar">
            
          <ul>
            
            
            <!--<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
            <li><a class="nav-link scrollto" href="#about">About</a></li>
            <li><a class="nav-link scrollto" href="#services">Services</a></li>
            <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
            <li><a class="nav-link scrollto" href="#team">Team</a></li>-->
            
            
            <li class="dropdown"><a href="#"><span>About <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#about">About</a></li>
                
                <li><a class="scrollto" href="#more-about">Detailed Info</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 03</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 04</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 05</a></li>
                    
                  </ul>
                </li>
                    
                    
                <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#about">DropDown 06</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 07</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 08</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 09</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 10</a></li>
                    
                  </ul>
                </li>
                
                
            <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#contact">Contact Info</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 12</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 13</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 14</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 15</a></li>
                    
                  </ul>
                </li>
                
                
                <!--<li><a href="#">Drop Down 2</a></li>
                <li><a href="#">Drop Down 3</a></li>
                <li><a href="#">Drop Down 4</a></li>
              </ul>
            </li>-->
            
            
            <!--<li><a class="nav-link scrollto" href="#contact">Contact</a></li>-->
            
            
            <li><a class="register scrollto" href="#about">REGISTER! <i class="fas fa-smile-beam fa-x2"></i></a></li>
          </ul>
          
          <i class="fas fa-bars mobile-nav-toggle"></i>
          
        </nav><!-- .navbar -->

      </div><!-- End Header Container -->
    </div>
  </header><!-- End Header -->

这不是原始问题的答案。将其作为新问题提出或使用评论部分，但不要发布新问题作为答案。
2021-03-24 21:52:08
如果您有新问题，请点击提问按钮进行提问。如果有助于提供上下文，请包含指向此问题的链接。-来自评论
2021-03-29 21:52:08
我在这里发布的代码在我找到它的模板上运行良好，应该是一个 BS 5 模板。有人请复制/粘贴我拥有的代码，并在该代码中添加可能有帮助的内容。非常感谢！:--)
2021-04-09 21:52:08 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
最初的问题是关于 Bootstrap v5，你的例子使用 4.3.1
2021-03-26 21:52:08
其它你可能感兴趣的问题
上一篇JavaScript 字符串中的双引号 下一篇JavaScript：具有 SRC 属性的内联脚本？