JavaScript切换Div代码在iOS设备失效问题求助

我编写了一段JavaScript代码，用于通过点击指定Div来显示或隐藏其他Div。该代码在PC浏览器及macOS设备（iMac/MacBook）上运行完全正常，但在iOS设备（iPad/iPhone）上无法生效。使用了Elementor和WordPress，但认为这与问题无关。相关代码如下：

// Check if the body doesn't have the CSS class 'elementor-editor-active'
if (!document.body.classList.contains('elementor-editor-active')) {
    const catButtons = document.querySelectorAll('.packages-btn, .programs-btn, .workshops-btn, .courses-btn, .tools-btn');
    const catContainers = document.querySelectorAll('.packages-container, .programs-container, .workshops-container, .courses-container, .tools-container');
  
    // If packages-btn clicked
    function packagesBtnClick() {
      for (let i = 0; i < catContainers.length; i++) {
        if (!catContainers[i].classList.contains('packages-container')) {
          catContainers[i].style.display = 'none';
        }
      }
      document.querySelector('.packages-container').style.display = 'block';
      document.querySelector('.btns-container').style.setProperty('--color-overlay-feria-container', '#009BB7');
    }
  
    catButtons.forEach((elemento) => {
      if (elemento.classList.contains('packages-btn')) {
        elemento.addEventListener('click', packagesBtnClick);
      }
    });
  
    // If programs-btn clicked
    function programsBtnClick() {
      for (let i = 0; i < catContainers.length; i++) {
        if (!catContainers[i].classList.contains('programs-container')) {
          catContainers[i].style.display = 'none';
        }
      }
      document.querySelector('.programs-container').style.display = 'block';
      document.querySelector('.btns-container').style.setProperty('--color-overlay-feria-container', '#E27727');
    }
  
    catButtons.forEach((elemento) => {
      if (elemento.classList.contains('programs-btn')) {
        elemento.addEventListener('click', programsBtnClick);
      }
    });
  
    // If workshops-btn clicked
    function workshopsBtnClick() {
      for (let i = 0; i < catContainers.length; i++) {
        if (!catContainers[i].classList.contains('workshops-container')) {
          catContainers[i].style.display = 'none';
        }
      }
      document.querySelector('.workshops-container').style.display = 'block';
      document.querySelector('.btns-container').style.setProperty('--color-overlay-feria-container', '#A9C45C');
    }
  
    catButtons.forEach((elemento) => {
      if (elemento.classList.contains('workshops-btn')) {
        elemento.addEventListener('click', workshopsBtnClick);
      }
    });
  
    // If courses-btn clicked
    function coursesBtnClick() {
      for (let i = 0; i < catContainers.length; i++) {
        if (!catContainers[i].classList.contains('courses-container')) {
          catContainers[i].style.display = 'none';
        }
      }
      document.querySelector('.courses-container').style.display = 'block';
      document.querySelector('.btns-container').style.setProperty('--color-overlay-feria-container', '#FFC23F');
    }
  
    catButtons.forEach((elemento) => {
      if (elemento.classList.contains('courses-btn')) {
        elemento.addEventListener('click', coursesBtnClick);
      }
    });
  
    // If tools-btn clicked
    function toolsBtnClick() {
      for (let i = 0; i < catContainers.length; i++) {
        if (!catContainers[i].classList.contains('tools-container')) {
          catContainers[i].style.display = 'none';
        }
      }
      document.querySelector('.tools-container').style.display = 'block';
      document.querySelector('.btns-container').style.setProperty('--color-overlay-feria-container', '#AD2A27');
    }
  
    catButtons.forEach((elemento) => {
      if (elemento.classList.contains('tools-btn')) {
        elemento.addEventListener('click', toolsBtnClick);
      }
    });
  }

以下是针对iOS设备问题的解决建议：

• 给可点击Div添加CSS交互属性
  iOS Safari对非原生可点击元素（如div）的触摸响应支持有限，添加以下CSS可以让系统识别其为可交互元素：

  .packages-btn, .programs-btn, .workshops-btn, .courses-btn, .tools-btn {
    cursor: pointer;
    touch-action: manipulation; /* 禁用双击缩放，提升触摸响应速度 */
    user-select: none; /* 防止触摸时意外选中文本 */
  }
  

• 补充触摸事件监听
  仅监听click事件在iOS上可能存在延迟或失效，同时绑定touchstart事件可以提升触摸设备的响应性：
  修改事件绑定部分，例如：

  elemento.addEventListener('click', packagesBtnClick);
  elemento.addEventListener('touchstart', packagesBtnClick);
  

  为避免click和touchstart重复触发，可以在事件处理函数中添加判断：

  function packagesBtnClick(event) {
    if (event.type === 'touchstart') event.preventDefault();
    // 原有逻辑...
  }
  

• 重构代码减少重复逻辑
  原代码存在大量重复，不仅维护麻烦，也可能增加潜在错误概率。可以通过统一逻辑+数据映射优化代码，同时提升兼容性：

  if (!document.body.classList.contains('elementor-editor-active')) {
    const catButtons = document.querySelectorAll('.packages-btn, .programs-btn, .workshops-btn, .courses-btn, .tools-btn');
    const catContainers = document.querySelectorAll('.packages-container, .programs-container, .workshops-container, .courses-container, .tools-container');
    // 分类与对应颜色的映射表
    const categoryColors = {
      packages: '#009BB7',
      programs: '#E27727',
      workshops: '#A9C45C',
      courses: '#FFC23F',
      tools: '#AD2A27'
    };
  
    function handleCategoryClick(event) {
      // 防止触摸与点击事件重复触发
      if (event.type === 'touchstart') event.preventDefault();
      
      // 从按钮类名中提取分类标识
      const category = event.currentTarget.classList.value.match(/(\w+)-btn/)[1];
      
      // 隐藏所有容器
      catContainers.forEach(container => {
        container.style.display = 'none';
      });
      // 显示目标容器
      document.querySelector(`.${category}-container`).style.display = 'block';
      // 设置颜色变量
      document.querySelector('.btns-container').style.setProperty('--color-overlay-feria-container', categoryColors[category]);
    }
  
    // 为所有按钮绑定事件
    catButtons.forEach(btn => {
      btn.addEventListener('click', handleCategoryClick);
      btn.addEventListener('touchstart', handleCategoryClick);
    });
  }
  

• 确保DOM加载完成后执行代码
  如果代码在DOM未完全渲染时执行，可能导致无法找到目标元素。将代码包裹在DOMContentLoaded事件中，确保元素已存在：

  document.addEventListener('DOMContentLoaded', function() {
    // 原代码或优化后的代码放在这里
  });
  

内容的提问来源于stack exchange，提问作者Santiago Cuartas Rmrz