如何用JS/JQuery在WordPress页面加载时关闭默认展开的手风琴？

嘿，作为WordPress新手遇到这种问题太正常了，我来帮你一步步排查原因并解决：

可能的问题原因及对应解决方案 #

1. jQuery冲突导致代码未执行 #

WordPress默认的jQuery处于No Conflict模式，也就是不能直接用$作为jQuery的别名，这会导致你的代码报错不生效。

修复代码：
把你的jQuery代码改成下面这样，用jQuery开头，或者把$作为参数传入ready函数：

jQuery(document).ready(function($) {
  // 这里可以正常用$了
  $(".accordion li:first").removeClass("active");
});

2. 代码执行时机太早，被手风琴插件覆盖 #

你的代码可能在手风琴插件初始化代码之前就执行了，插件后续又给第一个li加上了active类，导致你的操作被覆盖。

解决办法：

• 改用$(window).load()（等待所有资源加载完成后执行）：

jQuery(window).load(function($) {
  $(".accordion li:first").removeClass("active");
});

• 或者在WordPress中通过脚本依赖确保你的代码在手风琴插件之后加载：
  在主题的functions.php中添加以下代码（替换accordion-plugin-handle为手风琴插件的脚本别名，你可以在插件的代码里找到这个handle）：

function custom_accordion_fix() {
  wp_enqueue_script(
    'custom-accordion-fix',
    get_stylesheet_directory_uri() . '/js/custom-fix.js', // 你的脚本文件路径
    array('jquery', 'accordion-plugin-handle'), // 依赖手风琴插件脚本
    '1.0',
    true // 放在页脚加载
  );
}
add_action('wp_enqueue_scripts', 'custom_accordion_fix');

3. 选择器太宽泛，没精准命中目标 #

你用$("li")会选中页面上所有li元素，可能手风琴的li有特定的父容器或类名，导致你没精准修改到目标元素。

优化选择器：
先通过浏览器开发者工具（F12）查看手风琴的HTML结构，比如手风琴容器有class="kawneer-accordion"，那么就用更精准的选择器：

jQuery(document).ready(function($) {
  $(".kawneer-accordion li.active:first").removeClass("active");
});

4. 优先使用手风琴插件的原生配置 #

很多手风琴插件本身就支持设置默认展开项，这比事后移除类更稳定。比如：

• 如果是Bootstrap手风琴，初始化时设置active: false或者collapse: false；
• 如果是WordPress专用的手风琴插件，去插件的设置面板找“默认展开项”的选项，设置为“无”或者“不展开任何项”。

排查小技巧 #

按F12打开浏览器开发者工具，切换到Console标签，查看有没有JS报错，这能快速定位代码是否执行失败。

内容的提问来源于stack exchange，提问作者Charles J. Barnett