Bootstrap 5 Navbar dropdown点击刷新页面无法正常展开问题

核心问题及修复步骤 #

• 1. 修正Bootstrap JS引入方式
     原代码用<link>标签引入JS资源属于语法错误，JS需使用<script>标签引入：

<!-- 错误写法 -->
<link rel="script" href="Resources/bootstrap-5.1.0-dist/js/bootstrap.js">
<!-- 正确写法 -->
<script src="Resources/bootstrap-5.1.0-dist/js/bootstrap.js"></script>

• 2. 替换Bootstrap 5专属数据属性
     Bootstrap 5 所有交互类data属性都新增了bs-前缀，不再兼容Bootstrap 4的data-toggle/data-target写法：
     下拉触发按钮的属性修改如下，同时将空href改为#，避免点击时刷新页面：

  <a class="nav-link dropdown-toggle" href="#" id="projectsButton" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  

  如果需要使用导航栏折叠功能，navbar toggler按钮的data-toggle、data-target也要同步改为data-bs-toggle、data-bs-target

• 3. 修正HTML结构错误
     <nav>属于页面可见内容，不能放在<head>标签内，需要移动到<body>标签中，<head>仅保留元数据、资源引入等非可见内容。

验证方法 #

修改完成后刷新页面，点击Projects下拉按钮即可正常展开菜单，不会触发页面刷新。

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