Elementor：自定义显示和隐藏部分在某些浏览器中不起作用

Question

使用 Elementor 创建的网站出现问题。特别是，我有功能显示/隐藏功能，但它只适用于 Firefox，我需要它适用于所有的浏览器。

网址：https://designrv.com.au/evx/#evx-floorplan

对于上下文，我使用了以下站点中的“显示/隐藏部分”教程：https://wpjunction.net/elementor-show-hide-sections

我没有使用按钮（按照教程）来显示/隐藏部分，而是使用 HTML 元素来显示/隐藏 4 个容器，每个容器都有一个平面图图像 + 文本规范： 从选择框中选择一个选项以显示不同的平面图/规格（注意：总共有四个不同的平面图/规格部分 - 1 个始终显示，3 个始终隐藏）等...

几乎完全按照教程（链接如上）进行操作 - 我没有使用按钮，而是将按钮的 ID 分配给每个按钮，并将类“drv_container_hidden”分配给所有部分。

然后添加隐藏部分的CSS：

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

然后是用于控制行为的 JavaScript：

<script> 
    // 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

</script>

最后...

使用 Firefox 可以正常工作：

Chrome 和 Safari：显示/隐藏功能不起作用（即切换到选择框中的新选项不会更改布局/规格： 不知道它是否适用于 Windows 浏览器 - 我认为它不能。

按照 Elementor 支持的说明，我禁用了所有插件（Elementor 除外），然后一一打开，但问题仍然存在。 支持人员对问题进行了更深入的研究：在代码中发现了一些“错误”，但是，他们没有详细说明（违反了政策/规则）。 没有从原始教程页面得到作者的回复。 也在 facebook 的 Elementor 社区上发布了该问题，但没有人回复。

Answer 1

当您更改选项时，您的“onclick”事件似乎没有激活。相反，你可以在 JS 中执行类似的操作：

var select = document.getElementById("modSelect");
select.onchange = function(e) {
    e.preventDefault();

    // add one because the index will start at 0
    // note that in this context, "this" is the select element itself
    var btnNum = this.selectedIndex + 1;

    toggleDivs("sect" + btnNum);
}

每次用户更改当前选定的选项时都会触发此函数（即使他们在键盘导航时执行此操作，即使在 Firefox 中，onclick 事件也不会发生），然后获取 selectedIndex，这基本上是所选元素的索引，从0开始。我添加了1，因为你的btns是从1开始的。然后我们只需正常调用toggleDivs函数即可。请注意，

option

元素是不是按钮，因此您对变量的命名很混乱，这可能会导致对您的问题的误解。