Bootstrap 5导航栏折叠功能失效问题求助

问题概况 #

• Bootstrap 5环境下导航栏折叠按钮无法触发菜单展开/收起，相同代码在Bootstrap 4中可正常运行
• 已尝试移除按钮的navbar-toggler类和导航栏的navbar-collapse类，无效果
• 临时方案：给按钮添加onclick事件，通过JavaScript手动为导航栏添加show类
• 测试环境：Fedora Linux系统的Firefox浏览器、Android 11系统的Chrome浏览器

失效原因 #

Bootstrap 5对数据属性做了核心变更，所有原Bootstrap 4中的data-*属性（如data-toggle、data-target）都需要改为**data-bs-*前缀**。你提供的Bootstrap 5测试代码中，折叠按钮仍在使用旧的属性命名，导致Bootstrap 5的JS无法识别并绑定折叠事件。

修复后的Bootstrap 5代码 #

<!doctype html>
<html lang="sr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=false, initial-scale=1">
    <link rel="icon" href="{{ url_for('static', path='/images/favicon.png') }}" sizes="32x32" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <title>Navbar Test</title>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- 变更data属性前缀为data-bs- -->
            <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active" href="/">Home</a>
                    <a class="nav-item nav-link" href="/link1">Link 1</a>
                    <a class="nav-item nav-link" href="/link2">Link 2</a>
                    <div class="dropdown">
                        <a class="nav-item nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuReports" data-bs-toggle="dropdown" aria-expanded="false">
                          Reports
                        </a>
                       
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuReports">
                          <li><a class="dropdown-item" href="/reports/reminders">Reminders - Send</a></li>
                          <li><a class="dropdown-item" href="/reports/reminders?render_only">Reminders - Display Only</a></li>
                        </ul>
                      </div>
                </div>
            </div>
        </nav>
    </div>
  </body>
</html>

关键变更点 #

• 将折叠按钮的data-toggle="collapse"改为data-bs-toggle="collapse"
• 将data-target="#navbarNavAltMarkup"改为data-bs-target="#navbarNavAltMarkup"

额外说明：Bootstrap 5不再强制依赖jQuery，若无需jQuery的其他功能，可移除jQuery的引入，bootstrap.bundle.min.js已包含Popper.js，足够支撑导航栏折叠功能。

内容的提问来源于stack exchange，提问作者Marko Todoric