WordPress站点jQuery1.12.4+Bootstrap4.5.3手风琴点击无响应排查

• 核心问题1：你当前使用的是Bootstrap 3版本的手风琴HTML结构，和你引入的Bootstrap 4.5.3版本不兼容。Bootstrap 4已经废弃了panel系列类名，改用card系列类名实现手风琴组件，结构不匹配导致Bootstrap的collapse逻辑无法识别对应DOM元素。
• 核心问题2：Bootstrap 4的折叠交互依赖JS逻辑生效，当前JS逻辑未正常触发，所以没有阻止<a>标签的默认锚点跳转行为，点击后只会跳到对应href锚点的位置，也就是你看到的页面下移效果。
• 可能的触发原因还包括：未正确加载Bootstrap 4依赖的Popper.js、Bootstrap JS文件加载失败/顺序错误、多jQuery版本冲突导致Bootstrap方法挂载到了错误的jQuery实例上。

1. 适配Bootstrap 4的手风琴结构
   将所有旧的Bootstrap 3类名替换为对应Bootstrap 4类名：

• 外层panel-group → 改为accordion
• panel → 改为card
• panel-heading → 改为card-header
• panel-title → 改为card-title
• panel-body → 改为card-body
collapse、data-toggle="collapse"、data-parent等属性保留即可。

2. 校验资源加载的完整性和顺序
   确保站点资源按如下顺序加载，无404错误：

jQuery 1.12.4 → Popper.js（适配Bootstrap 4版本） → Bootstrap 4.5.3 JS

Bootstrap 4的所有交互组件都依赖Popper.js实现，缺失会导致所有JS交互失效。

3. 排查多jQuery版本冲突
   打开页面源码搜索jQuery引入语句，确认站点仅引入一次jQuery 1.12.4。如果存在多个版本的jQuery引入，移除冗余引入即可；如果无法移除其他版本，可以通过jQuery.noConflict()方法隔离版本，将Bootstrap方法手动挂载到你需要的jQuery实例上。

4. 临时兜底修复方案
   如果暂时不想调整DOM结构，可以在站点自定义JS中加入如下代码，手动实现折叠逻辑并阻止默认跳转：

jQuery(document).ready(function($){
  $('[data-toggle="collapse"]').off('click').on('click', function(e){
    e.preventDefault();
    const target = $(this).attr('href');
    $(target).collapse('toggle');
  });
});

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