Bootstrap 5中的导航栏下拉菜单（折叠）无法工作

Question

Bootstrap 5中的导航栏下拉菜单（折叠）无法工作

javascripthtmlcsstwitter-bootstrapbootstrap-5

39

我用 Bootstrap 5 创建响应式的菜单或下拉按钮时遇到了问题。看起来一切正常，导航图标和下拉图标都出现了。但是当我点击导航图标或下拉按钮时，没有下拉菜单出现。我想特别提一下，我也包含了 jquery 文件，但它不起作用。有人能告诉我这里发生了什么吗？最后一个问题，我还遇到了其他一些 bootstrap 类（例如 mr-auto、ml-auto）的严重问题。这是什么 bug 还是 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>

- Sonet Adhikary

你可以尝试使用 Bootstrap 5.0 的导航栏示例 https://getbootstrap.com/docs/5.0/components/navbar/，并阅读迁移文档 https://getbootstrap.com/docs/5.0/migration/。 - Jérôme Teisseire

12个回答

15

请确保在标签中添加了bootstrap主页提供的jsDeliver CDN链接，用于JavaScript和CSS的加载。

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

- Sahil Kumar Singh

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Muhammedogz

非常好的答案！解决了我的问题。 - Carson Cole

添加后，下拉菜单将出现，谢谢！ - Lionlollipop

8

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>
</button>

您使用了data-toggle这个属性，它是在旧版Bootstrap中使用的，而在Bootstrap 5中，您需要使用data-bs-toggle这个属性，并且最重要的另一件事是您需要使其(aria-expanded="true")。

- Muhammad Osama Javaid

2

我也遇到了同样的问题，首先我将data-target更改为data-bs-target，将data-toggle更改为data-bs-toggle，其次我包含了bootstrap.bundle.min.js和纯bootstrap.min.js的cdn链接。添加两个相同的脚本会导致问题。

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>



    <div id="navbarSupportedContent" class="collapse navbar-collapse" >
        <ul class="navbar-nav me-auto">
            <li class="nav-item active">
                <a class="nav-link" href=@Url.Action("Index","Home")>Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("AboutUs","Home")>About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("OurTeam","Home")>Our Team</a>
            </li>
            @*<li class="nav-item">
                <a class="nav-link" href=@Url.Action("Blog","Home")>Blog</a>
            </li>*@
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("ContactUs","Home")>Contact Us</a>
            </li>
            @*<li class="nav-item">
                <a class="nav-link" href=@Url.Action("LoanCalculator","Home")>Loan Calculator</a>
            </li>*@
        </ul>

    </div>




</nav>`

- sumit dubey

2

我在这个问题上浪费了整整一天的时间。所以请记住，永远不要使用两个相同的脚本文件，而是要使用bootstrap.bundle.min.js或bootstrap.min.js其中之一。 - sumit dubey

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。如果您想在此问题获得新的答案时收到通知，可以关注此问题。一旦您拥有足够的声望，您还可以添加悬赏以吸引更多关注。- 来自审核 - Ethan McTague

1

对我来说，只需在 data-target 和 data-toggle 中添加 -bs 即可解决此问题。

<button
      className="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNavDropdown"
      aria-controls="navbarNavDropdown"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >

- Saeed Aldosary

1

除了在正文中包含JS链接外，按钮和div具有相同的aria-control/data-bs-target和ID：

- Agrover112

0

你需要导入

- TEÓFILO CRUZ URRELO

0

<!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-bs-toggle="collapse"
                data-bs-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>

- Priyanshu Gupta

欢迎来到SO！请编辑您的答案并添加文本说明，为什么以及如何工作以及它与其他给出的答案有何不同。 - ahuemmer

-1

在编写程序时，如果你需要使用 Bootstrap 3 中的 "data-toggle" 属性，你需要改用 "data-bs-toggle" 属性。

- user16936066

目前你的回答不够清晰，请编辑并添加更多细节以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

-1

我在当前正在编辑的网站中遇到了下拉菜单的问题。今晚，我终于有了一个带有下拉菜单的导航菜单，允许在点击链接后关闭下拉菜单！我通过不同的模板对其进行了样式设置，看起来非常棒！然而，当我将菜单添加到正在编辑的网站时，移动切换菜单没有打开。我该如何修复这个问题？谢谢！:--)

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

- TipTop

1

这不是对原问题的回答。请将其作为新问题提出或使用评论部分，但不要将新问题发布为答案。 - Daniel W.

如果您有新的问题，请通过单击提问按钮来提出。如果它有助于提供上下文，请包含此问题的链接。- 来自审核 - Sfili_81

我在这里发布的代码在我找到它的模板上运行良好，那应该是一个 BS 5 模板。请有人复制/粘贴我的代码，并添加可能有帮助的编码。非常感谢！:--) - TipTop

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

Bootstrap 5中已经用data-bs-*替换了Bootstrap 4中使用的data-*属性。

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

演示

正如文档中所解释的那样，所有JavaScript插件的数据属性现在都被命名空间化，以帮助区分Bootstrap功能和第三方及您自己的代码。这意味着任何Javascript组件（折叠、导航栏、轮播、下拉菜单、选项卡、模态框等）只能使用data-bs-...属性。

Bootstrap 5是一个重大更新，具有重大更改。此外，请查看此处ml-auto/mr-auto已更改为ms-auto/me-auto。