如何在WordPress中正确引入jQuery实现点击切换元素效果

1. 核心问题：WordPress jQuery无冲突模式限制 #

WordPress为了避免和其他JS库产生冲突，默认自带的jQuery不启用$别名，你直接使用$会触发未定义错误，导致代码不生效。
将你/assets/js/your-script.js里的代码替换为如下兼容写法即可：

jQuery(document).ready(function($) {
  // 该作用域内可正常使用$别名
  $("#newark").click(function() {
    $("#mencontoz").toggle();
  });
});

2. 其他需要核对修正的点 #

• 删除你HTML中手动添加的jQuery引入代码<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>。你挂载脚本时已经声明了jquery依赖，WordPress会自动加载自带的jQuery，重复引入会导致事件绑定失效。
• 如果你使用的是子主题，将挂载代码里的get_template_directory_uri()替换为get_stylesheet_directory_uri()，前者指向父主题目录，后者才指向子主题目录，避免路径错误导致JS文件加载失败。
• 操作完成后清理浏览器缓存和WordPress站点缓存（如果安装了缓存插件），再测试功能。

可选排查方式 #

打开浏览器开发者工具的「控制台」标签，可快速定位问题：

• 出现$ is not defined报错：对应无冲突模式问题，按第一点方案修正即可
• 出现your-script.js 404 Not Found报错：对应文件路径错误，核对文件存放位置和路径写法即可

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