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

dsf9zpds  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(127)

在使用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:

  1. <style>
  2. .elementor-editor-active .drv_container_hidden{
  3. display:block;
  4. }
  5. .drv_container_hidden{
  6. display:none;
  7. }
  8. .shown{
  9. display: block !important;
  10. }
  11. </style>

字符串
然后是控制行为的JavaScript:

  1. <script>
  2. // replace with your button IDs
  3. var btn1 = document.getElementById("btn1");
  4. var btn2 = document.getElementById("btn2");
  5. var btn3 = document.getElementById("btn3");
  6. var btn4 = document.getElementById("btn4");
  7. //Click Event Handlers for buttons
  8. btn1.onclick = function(event){
  9. event.preventDefault();
  10. toggleDivs("sect1");
  11. };
  12. btn2.onclick = function(event){
  13. event.preventDefault();
  14. toggleDivs("sect2");
  15. };
  16. btn3.onclick = function(event){
  17. event.preventDefault();
  18. toggleDivs("sect3");
  19. };
  20. btn4.onclick = function(event){
  21. event.preventDefault();
  22. toggleDivs("sect4");
  23. };
  24. //function to hide or show
  25. function toggleDivs(s){
  26. //reset
  27. document.getElementById("sect1").classList.remove("shown");
  28. document.getElementById("sect2").classList.remove("shown");
  29. document.getElementById("sect3").classList.remove("shown");
  30. document.getElementById("sect4").classList.remove("shown");
  31. document.getElementById(s).classList.add("shown");
  32. }
  33. btn1.focus(); //force first button to focus
  34. btn1.click(); //force first button to click
  35. </script>


最后...
使用Firefox:working show/hide feature in Firefox
Chrome浏览器和Safari浏览器:显示/隐藏特征不起作用(即,切换到选择框中的新选项不会更改平面布置图/规格:not working show/hide feature in Safari不知道它是否能在Windows浏览器上工作-我假设它不能。
根据Elementor支持的说明,我禁用了所有插件-除了Elementor -一个接一个地打开,但问题仍然存在。Support对问题进行了更深入的研究:在代码中发现了一些“bug”,但是,他们不会详细说明(违反策略/规则)。没有从原始教程页面的作者那里得到回应。也在Facebook的Elementor社区上发布了这个问题,但没有人回应。

ffdz8vbo

ffdz8vbo1#

当您更改选项时,您的“onclick”事件似乎没有激活。相反,你可以在你的JS中做这样的事情:

  1. var select = document.getElementById("modSelect");
  2. select.onchange = function(e) {
  3. e.preventDefault();
  4. // add one because the index will start at 0
  5. // note that in this context, "this" is the select element itself
  6. var btnNum = this.selectedIndex + 1;
  7. toggleDivs("sect" + btnNum);
  8. }

字符串
这个函数将在用户每次更改当前选择的选项时触发(即使他们在键盘导航时这样做,即使在Firefox中也不会发生onclick事件),然后获取selectedIndex,基本上是所选元素的索引,从0开始。我加了一个,因为你的btns从1开始。然后我们简单地调用toggleDivs函数。请注意,option元素 * 不是 * 一个按钮,因此您对变量的命名令人困惑,这可能会导致对您的问题的误解。

相关问题