WordPress Divi手风琴切换时触发相邻列对应图片更换的最佳实现方法

前置配置（先完成HTML/CSS部分） #

• 给相邻列的6张对应图片添加统一类名 acc-related-img，按手风琴顺序依次排列（第1张对应手风琴0号项、第2张对应1号项…第6张对应5号项）
• 添加如下CSS，可直接放到Divi主题选项>自定义CSS中：

/* 默认隐藏所有关联图片 */
.acc-related-img {
  display: none;
  width: 100%;
  height: auto;
}
/* 激活状态的图片显示 */
.acc-related-img.active {
  display: block;
}

步骤1：添加JS交互代码 #

直接将以下代码复制到Divi主题选项>集成>「将代码添加到 之前」的输入框中即可，无需修改：

// 等待页面完全加载
document.addEventListener('DOMContentLoaded', function() {
  const accordion = document.getElementById('slidepick');
  if (!accordion) return;

  // 同步图片函数
  function syncAccordionImage() {
    // 获取当前展开的手风琴项
    const activeItem = accordion.querySelector('.et_pb_toggle_open');
    if (!activeItem) return;
    // 提取手风琴项的序号（从类名et_pb_accordion_item_X中取X）
    const itemIndex = Array.from(activeItem.classList)
      .find(cls => cls.startsWith('et_pb_accordion_item_'))
      .split('_')[4];
    // 切换图片激活状态
    const allImages = document.querySelectorAll('.acc-related-img');
    allImages.forEach(img => img.classList.remove('active'));
    if (allImages[itemIndex]) {
      allImages[itemIndex].classList.add('active');
    }
  }

  // 页面初始化时先同步一次
  syncAccordionImage();

  // 监听所有手风琴标题的点击事件
  const toggleTitles = accordion.querySelectorAll('.et_pb_toggle_title');
  toggleTitles.forEach(title => {
    title.addEventListener('click', function() {
      // 延迟100ms等待Divi自带的手风琴切换逻辑执行完成
      setTimeout(syncAccordionImage, 100);
    });
  });
});

验证效果 #

保存设置后清缓存刷新页面，点击手风琴不同项时，相邻列的对应图片会自动切换，初始加载时也会匹配默认展开的手风琴项对应的图片。

内容的提问来源于stack exchange，提问作者Web-Dude