WordPress页面中JavaScript下拉菜单脚本无法执行问题求助

核心问题分析 #

1. JS代码混入PHP语法：你在JavaScript里写了add_action ('wp_head', 'myFunction');，这是PHP专属函数，不能放在JS中，直接添加到functions.php会触发语法错误导致网站崩溃。
2. 脚本加载时机/作用域问题：直接把JS贴到header.php时，可能DOM还未加载完成，或者函数处于局部作用域，导致HTML里的onclick="myFunction()"无法调用到函数。

分步解决方案 #

1. 正确加载JavaScript #

方法一：通过functions.php注册脚本（推荐）

• 在主题的functions.php文件末尾添加以下PHP代码：

function enqueue_custom_dropdown_script() {
    // 注册并加载自定义下拉菜单脚本
    wp_enqueue_script(
        'custom-dropdown-script',
        get_stylesheet_directory_uri() . '/js/dropdown.js',
        array(), // 依赖脚本（无则留空）
        '1.0', // 版本号
        true // 放在页面底部加载，优化性能
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_dropdown_script');

• 在主题文件夹下新建js目录，创建dropdown.js文件，写入以下纯JavaScript代码（去掉原来的add_action行）：

// 切换下拉菜单显示/隐藏
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 点击外部关闭下拉菜单
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

方法二：直接在header.php中添加脚本

如果不想单独创建JS文件，在header.php的</head>标签前添加以下代码（确保函数全局可访问，且DOM加载完成）：

<script>
document.addEventListener('DOMContentLoaded', function() {
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }

    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    // 将函数挂载到全局，供HTML的onclick调用
    window.myFunction = myFunction;
});
</script>

2. 添加CSS样式 #

将你的CSS代码添加到：

• 后台「外观→自定义→额外CSS」（最简便）；
• 或者主题的style.css文件末尾。

/* Dropdown Button hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #5e7c6d;
  cursor: url(https://imthemoisturizer.com/wp-content/uploads/2020/07/Cursor-2.png), auto;
}

/* Dropdown容器 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 默认隐藏下拉内容 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 下拉链接样式 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 下拉链接hover效果 */
.dropdown-content a:hover {
  background-color: #ddd;
  cursor: url(https://imthemoisturizer.com/wp-content/uploads/2020/07/Cursor-2.png), auto;
}

/* 显示下拉菜单的类 */
.show {display:block;}

3. 添加HTML结构 #

将HTML代码插入到你想要显示下拉菜单的位置（比如页面内容、header.php的导航区域等）：

<div class="dropdown">
  <p onclick="myFunction()" class="dropbtn">Dropdown</p>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

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