WordPress站点Bootstrap 5汉堡导航菜单点击无法展开问题求助

按以下顺序排查修复即可，无需反复更换CDN源：

• 核心错误修复：Bootstrap 5 所有组件的触发属性统一增加了bs-前缀，你当前的折叠按钮上使用的是Bootstrap 4版本的data-toggle="collapse"属性，Bootstrap 5 的JS无法识别该属性，自然不会绑定点击展开事件。将该属性修改为data-bs-toggle="collapse"即可恢复基础交互。
  修复后按钮代码：

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

• 清理冗余冲突代码：你代码中编写的.topnav系列样式、控制#myLinks元素显隐的myFunction()脚本属于另一套自定义导航逻辑，当前页面不存在id为myLinks的节点，这些内容暂时不会生效，但后续如果新增同名节点会直接和Bootstrap折叠逻辑冲突，建议直接删除。
• 排查WordPress资源重复加载问题：你将手动引入的Bootstrap资源放在了wp_head()函数之后，而WordPress主题、已安装插件的静态资源都是通过wp_head()钩子输出的，大概率已经自动加载了一份其他版本的Bootstrap文件，和你手动引入的5.0.2版本产生冲突。可以打开浏览器开发者工具的网络面板，搜索bootstrap关键字，如果存在两份及以上Bootstrap的JS/CSS文件，删除你手动硬编码的引入代码，改用WordPress官方提供的wp_enqueue_script、wp_enqueue_style接口按依赖顺序加载资源，从根源避免重复加载冲突。
• 附带小问题修复：你的站点logo的<a>标签写了两个class属性，第二个class="active"不会被浏览器解析，需要将类名合并到同一个class属性中。
  修复后logo代码：

  <a class="navbar-brand active" href="<?php echo home_url();?>">
    <img src="<?php echo get_theme_file_uri('images/m-no-shadow.png');?>" class="header-logo">
  </a>
  

验证提示：修改完折叠按钮的属性后，清空浏览器缓存再点击汉堡按钮即可正常展开，如果仍无响应再按第三步排查重复加载的资源即可。

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