WordPress自定义JavaScript无法生效问题排查求助

核心原因：jQuery noConflict模式 #

WordPress默认加载的jQuery启用了noConflict模式，会释放$变量的控制权，你代码里直接用$调用jQuery方法会触发报错。而本地VSCode环境中通常使用的是未启用该模式的jQuery，所以代码能正常运行。

修复方案 #

方案1：替换所有$为jQuery #

直接修改JS代码，把所有$替换成jQuery即可：

///nav bar size response
jQuery('.navbar-toggle').click(function() {
  jQuery('.navbar-nav').toggle();
});

jQuery(document).ready(function(){
  jQuery(".sub-btn").click(function(){
    jQuery(this).next(".sub-menu").slideToggle();
  })
  jQuery(".other-btn").click(function(){
    jQuery(this).next(".other-menu").slideToggle();
  })
})

//button toggle
var menu = document.querySelector(".menu")
var menuBtn = document.querySelector(".menu-btn")
var closeBtn = document.querySelector(".close-btn")

menuBtn.addEventListener("click", () => {
  menu.classList.add("active");
});

closeBtn.addEventListener("click", () => {
  menu.classList.remove("active");
});

//header scroll

window.addEventListener("scroll", function(){
  var header = this.document.querySelector("header");
  header.classList.toggle("sticky", window.scrollY > 0);
});

方案2：用自执行函数包裹代码（保留$） #

如果不想替换$，可以把依赖jQuery的代码放在自执行函数里，将jQuery作为参数传递并命名为$：

(function($) {
  ///nav bar size response
  $('.navbar-toggle').click(function() {
    $('.navbar-nav').toggle();
  });

  $(document).ready(function(){
    $(".sub-btn").click(function(){
      $(this).next(".sub-menu").slideToggle();
    })
    $(".other-btn").click(function(){
      $(this).next(".other-menu").slideToggle();
    })
  })
})(jQuery);

//button toggle
var menu = document.querySelector(".menu")
var menuBtn = document.querySelector(".menu-btn")
var closeBtn = document.querySelector(".close-btn")

menuBtn.addEventListener("click", () => {
  menu.classList.add("active");
});

closeBtn.addEventListener("click", () => {
  menu.classList.remove("active");
});

//header scroll

window.addEventListener("scroll", function(){
  var header = this.document.querySelector("header");
  header.classList.toggle("sticky", window.scrollY > 0);
});

额外检查点 #

确保你的JS文件在入队时声明了jQuery依赖，在functions.php的入队代码中添加依赖参数：

wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );

• 第三个参数array('jquery')表示该脚本依赖jQuery，WordPress会确保jQuery先于你的脚本加载；
• 最后一个参数true表示脚本放在</body>前加载，避免DOM未加载完成就执行脚本。

内容的提问来源于stack exchange，提问作者Nickler-sama