Bootstrap v5.3导航栏汉堡菜单点击不折叠问题求助

你的代码核心问题是重复引入了Bootstrap相关JS文件，导致功能冲突：
bootstrap.bundle.min.js已经集成了Popper.js和Bootstrap的核心JavaScript功能，不需要再单独引入@popperjs/core和bootstrap.min.js，重复加载会打乱折叠交互的逻辑，直接导致汉堡按钮点击无反应。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;1,500&display=swap"
        rel="stylesheet">
    <!-- 只保留集成了Popper的bundle版本即可 -->
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

    <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <a href="#" class="navbar-brand mb-0 h1">Logo</a>
        <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link active">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About Us</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Courses</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Blog</a>
                </li>
            </ul>
        </div>
    </nav>
</head>
<body>
</body>
</html>

额外注意点 #

• 你代码里的nav-item重复加了active类，只有当前页面对应的菜单项需要加active，其他项应该去掉，避免样式混乱
• 确保data-bs-target属性值和折叠容器的id完全一致（你这里是正确的，无需修改）
• 视口标签<meta name="viewport">设置正确，这是Bootstrap响应式布局生效的前提

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