在使用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:working show/hide feature in Firefox的
Chrome浏览器和Safari浏览器:显示/隐藏特征不起作用(即,切换到选择框中的新选项不会更改平面布置图/规格:not working show/hide feature in Safari不知道它是否能在Windows浏览器上工作-我假设它不能。
根据Elementor支持的说明,我禁用了所有插件-除了Elementor -一个接一个地打开,但问题仍然存在。Support对问题进行了更深入的研究:在代码中发现了一些“bug”,但是,他们不会详细说明(违反策略/规则)。没有从原始教程页面的作者那里得到回应。也在Facebook的Elementor社区上发布了这个问题,但没有人回应。
1条答案
按热度按时间ffdz8vbo1#
当您更改选项时,您的“onclick”事件似乎没有激活。相反,你可以在你的JS中做这样的事情:
字符串
这个函数将在用户每次更改当前选择的选项时触发(即使他们在键盘导航时这样做,即使在Firefox中也不会发生onclick事件),然后获取selectedIndex,基本上是所选元素的索引,从0开始。我加了一个,因为你的btns从1开始。然后我们简单地调用toggleDivs函数。请注意,
option
元素 * 不是 * 一个按钮,因此您对变量的命名令人困惑,这可能会导致对您的问题的误解。