Elementor自定义显示/隐藏模块仅Firefox可用，多浏览器兼容求助

问题概述 #

• 基于Elementor搭建的网站，显示/隐藏功能仅在Firefox浏览器中正常运行，Chrome、Safari等浏览器无法工作——切换HTML选择框选项时，无法对应切换户型图及参数。
• 实现方式：参考教程逻辑，但未使用教程中的按钮，改用HTML选择框控制4个包含户型图和参数的容器；为容器分配对应ID并添加drv_container_hidden类，同时添加了以下CSS和JavaScript代码。
• 已按Elementor支持要求排查插件（仅保留Elementor，逐个开启其他插件），问题仍存在；官方支持指出代码存在bug，但未说明具体细节。

当前使用的代码 #

CSS代码 #

.elementor-editor-active .drv_container_hidden{ 
    display:block; 
} 
.drv_container_hidden{ 
    display:none; 
} 
.shown{ 
    display: block !important; 
} 

JavaScript代码 #

// replace with your button IDs 
var btn1 = document.getElementById("btn1"); 
var btn2 = document.getElementById("btn2"); 
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4"); 
 //Click Event Handlers for buttons 
btn1.onclick = function(event){ 
    event.preventDefault(); 
    toggleDivs("sect1"); 
}; 
btn2.onclick = function(event){ 
    event.preventDefault(); 
    toggleDivs("sect2"); 
}; 
btn3.onclick = function(event){ 
    event.preventDefault(); 
    toggleDivs("sect3"); 
};
btn4.onclick = function(event){ 
    event.preventDefault(); 
    toggleDivs("sect4"); 
}; 
//function to hide or show 
function toggleDivs(s){ 
    //reset
    document.getElementById("sect1").classList.remove("shown");
    document.getElementById("sect2").classList.remove("shown");
    document.getElementById("sect3").classList.remove("shown");
    document.getElementById("sect4").classList.remove("shown");
    document.getElementById(s).classList.add("shown"); 
} 
btn1.focus(); //force first button to focus
btn1.click(); //force first button to click

问题根源分析 #

1. 事件绑定逻辑错误：当前JS代码绑定的是按钮的click事件，但实际使用的是HTML选择框，两者事件类型完全不匹配，导致选择框切换时无法触发对应逻辑。
2. DOM加载顺序问题：如果JS代码在DOM元素加载完成前执行，getElementById会返回null，后续代码在不同浏览器中表现不同——Firefox可能容错性较强，而Chrome、Safari会直接报错终止脚本执行，导致功能失效。

修复方案 #

步骤1：修改HTML选择框 #

给你的HTML选择框添加一个ID，例如：

<select id="floorplan-select">
    <option value="sect1">户型1</option>
    <option value="sect2">户型2</option>
    <option value="sect3">户型3</option>
    <option value="sect4">户型4</option>
</select>

步骤2：替换为修正后的JavaScript代码 #

// 等待DOM加载完成后执行脚本
document.addEventListener('DOMContentLoaded', function() {
    // 获取选择框元素
    const selectBox = document.getElementById('floorplan-select');
    // 定义所有容器ID
    const sectionIds = ['sect1', 'sect2', 'sect3', 'sect4'];

    // 切换容器显示状态的函数
    function toggleDivs(targetId) {
        // 先隐藏所有容器
        sectionIds.forEach(id => {
            const section = document.getElementById(id);
            if (section) section.classList.remove('shown');
        });
        // 显示目标容器
        const targetSection = document.getElementById(targetId);
        if (targetSection) targetSection.classList.add('shown');
    }

    // 监听选择框的change事件
    if (selectBox) {
        selectBox.addEventListener('change', function() {
            toggleDivs(this.value);
        });
        // 初始化默认显示第一个户型
        toggleDivs(selectBox.value);
    }
});

说明 #

• 改用DOMContentLoaded事件确保脚本在DOM完全加载后执行，避免获取不到元素的问题。
• 监听选择框的change事件，根据选中的value值对应切换容器，匹配实际使用场景。
• 增加了元素存在性判断，避免因元素不存在导致的脚本报错，提升兼容性。

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