Bootstrap 5.1.3 导航栏折叠按钮点击无响应问题求助

你引入的资源版本存在不匹配问题：CSS用的是Bootstrap 5.1.3版本，但JS引入的是Bootstrap 4.3.1的旧版本，两个大版本的交互API完全不兼容：

• Bootstrap 5已经移除了对jQuery的依赖，交互属性前缀统一为data-bs-*（你导航栏按钮上用的data-bs-toggle、data-bs-target就是Bootstrap 5的标准属性）
• 你引入的Bootstrap 4的JS只能识别data-*前缀的属性，无法响应Bootstrap 5的属性触发逻辑，所以点击折叠按钮没有反应
• Codeply2平台默认内置了Bootstrap 5的完整运行环境，会覆盖你引入的错误JS资源，所以上传后功能正常

直接替换你<head>里的所有JS引入代码，换成Bootstrap 5对应版本的JS资源即可，不需要再引入jQuery和旧版popper：

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- 替换为Bootstrap 5的JS，内置popper，无需额外引入jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

修改后刷新页面即可看到折叠按钮点击后可正常展开/收起导航菜单，原有导航栏的所有样式和结构不需要做任何调整。

内容的提问来源于stack exchange，提问作者Đức Seven