本文详解如何使用原生 javascript 实现点击 elementor 可展开菜单时动态切换头部 logo 图片、按钮颜色及背景色，修复常见 dom 选择器错误，并提供兼容 wordpress/elementor pro 的完整可运行代码。
本文详解如何使用原生 javascript 实现点击 elementor 可展开菜单时动态切换头部 logo 图片、按钮颜色及背景色，修复常见 dom 选择器错误，并提供兼容 wordpress/elementor pro 的完整可运行代码。
在 WordPress + Elementor Pro 构建的网站中，为提升交互体验，常需在用户点击顶部左上角「汉堡菜单」（.elementor-menu-toggle）时，同步更新头部（header）视觉风格——例如将背景设为白色、替换 Logo 为蓝色版本、并统一右上角按钮的文字与边框色为 #2E324D。但初学者易因 DOM 选择器误用（如 getElementsByClassName 返回类数组而非单个元素）导致脚本失效。
以下是一套经过验证、开箱即用的解决方案，适用于 Elementor 默认结构（基于 .elementor-element-a58d576 等实际 class 名，请按您页面 inspector 中的准确 class 调整）：
✅ 正确的 JavaScript 实现（含防错与状态管理）
<script>
document.addEventListener('DOMContentLoaded', function() {
// 1. 获取菜单触发器（注意：getElementsByClassName 返回 HTMLCollection，取首个）
const menuToggle = document.getElementsByClassName('elementor-menu-toggle')[0];
if (!menuToggle) return; // 安全防护：若元素不存在则退出
// 2. 获取需控制的头部元素（请根据实际 HTML 结构调整 selector）
const header = document.querySelector('.elementor-element-a58d576'); // 整体 header 容器
const logoImg = document.querySelector('.elementor-logo img'); // 假设 Logo 是 <img> 标签
const buttons = document.querySelectorAll('.elementor-button'); // 右上角两个按钮（支持多个）
// 3. 定义切换状态：true=菜单展开，false=收起
let isMenuOpen = false;
// 4. 绑定点击事件（使用事件委托更健壮，此处简化为直接监听）
menuToggle.addEventListener('click', function() {
isMenuOpen = !isMenuOpen;
if (isMenuOpen) {
// 展开时：应用新样式
if (header) header.style.backgroundColor = '#ffffff';
if (logoImg) {
// 保存原始 src，便于收起时还原（推荐做法）
if (!logoImg.dataset.originalSrc) {
logoImg.dataset.originalSrc = logoImg.src;
}
logoImg.src = 'https://prova.lamaielletta.it/wp-content/uploads/2023/10/Logo-Blu.png';
}
buttons.forEach(btn => {
btn.style.color = '#2E324D';
btn.style.borderColor = '#2E324D';
// 可选：增强可访问性，添加过渡效果
btn.style.transition = 'color 0.3s ease, border-color 0.3s ease';
});
} else {
// 收起时：恢复原始样式（建议预存原始值）
if (header) header.style.backgroundColor = ''; // 清空内联样式，回归 CSS 默认
if (logoImg && logoImg.dataset.originalSrc) {
logoImg.src = logoImg.dataset.originalSrc;
}
buttons.forEach(btn => {
btn.style.color = '';
btn.style.borderColor = '';
});
}
});
});
</script>⚠️ 关键注意事项
- 选择器必须精准匹配：Elementor 生成的 class 名（如 elementor-element-a58d576）是动态哈希值，每次保存可能变化。请务必通过浏览器开发者工具（F12 → Elements 面板）复制您站点当前真实的 class 或使用更稳定的 selector（如 header.site-header、#masthead 等自定义 ID/class）。
- 避免内联样式污染：本方案采用 style.xxx = '' 清空内联样式，确保 CSS 主题规则仍生效；如需强覆盖，可在 <style> 中定义 .header-active { background: white; } 并用 classList.toggle() 控制。
-
图片加载优化：蓝色 Logo 已预加载，但首次切换时可能有短暂闪烁。可提前在 <head> 中预加载：
<link rel="preload" href="https://prova.lamaielletta.it/wp-content/uploads/2023/10/Logo-Blu.png" as="image">
- WordPress 集成建议：使用 WPCode 插件插入时，选择「HTML Snippet」类型，位置设为「Footer」或「Before
