Elementor实现按钮切换区块功能，页面刷新后按钮无法点击如何解决？

问题根源 #

• 代码结构错误：script标签内混入了CSS样式代码，导致JS解析报错，后续的事件绑定逻辑直接中断
• 执行时机错误：代码未等待DOM元素完全加载就执行，页面刷新后按钮/区块元素还未渲染完成，选择器拿不到元素，事件绑定失败、btn1.click()调用直接报错
• Elementor特性适配缺失：Elementor有独立的DOM渲染生命周期，特别是开启了动态加载、入场动画的场景，直接监听原生DOM加载事件可能失效

修正后完整代码 #

<!-- 样式部分 -->
<style>
.elementor-editor-active .hidden{
  display:block;
}
.hidden{
  display:none;
}
.shown{
  display: block !important;
  animation: fade_in_anim 0.5s;
}
.btn_active_state{
  background-color: #D9D3FF !important;
}
@keyframes fade_in_anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
</style>

<!-- 逻辑部分 -->
<script>
// 适配Elementor渲染生命周期，等所有元素加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 兼容Elementor前端渲染完成事件
  if (window.elementorFrontend) {
    elementorFrontend.hooks.addAction('frontend/element_ready/global', initToggleFunc);
  } else {
    initToggleFunc();
  }
});

function initToggleFunc() {
  const buttons = [...document.querySelectorAll("[id^='btn']")];
  const mapping = [[0, 4], [4, 8], [8,12]];
  const sections = [...document.querySelectorAll("[id^='sect']")];
  
  // 做容错判断，元素不足时不执行避免报错
  if (buttons.length < 3 || sections.length < 12) return;

  for(let i = 0; i < 3; i++) {
    buttons[i].addEventListener('click', function(event) {
      event.preventDefault();
      toggleDivs(this);
      for(let j = mapping[i][0]; j < mapping[i][1]; j++) {
        sections[j].classList.add("shown", "fade");
      }
    });
  }

  function toggleDivs(btn){
    buttons.forEach(b => b.classList.remove("btn_active_state"));
    btn.classList.add("btn_active_state");
    sections.forEach(s => s.classList.remove('shown'));
  }

  // 初始化默认选中第一个按钮，从数组取元素避免全局ID未定义报错
  buttons[0].focus();
  buttons[0].click();
}
</script>

注意事项 #

• 所有需要控制的sect区块默认都要加上hidden类，保证初始状态隐藏
• 确认按钮ID为btn1、btn2、btn3，区块ID顺序为sect1到sect12，和映射规则匹配
• 如果开启了Elementor的缓存功能，修改代码后需要清空Elementor缓存再测试

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