如何在WordPress中隐藏描述区，实现点击对应图片才显示内容

完全可以在WordPress实现这套交互，不需要依赖Shopify的专属功能——本质上这套逻辑只是把原来的交互触发源从描述框换成图片，再加个默认隐藏的状态控制，没有任何技术门槛。

先把现有页面的模块结构确认清楚，避免交互错位：

• 保证每一组「产品图片 + 对应描述详情框」被放在同一个独立的父容器下，不能出现图片和对应描述框跨层级、跨模块的情况，否则绑定触发关系很容易串位
• 先找到现有交互的触发逻辑：目前是点击描述框才弹出详情，要先把这个原有绑定规则屏蔽/移除，避免新规则和旧规则冲突

路径1：无代码可视化操作（适合没有代码基础的用户） #

借助你当前在用的页面构建器（不管是古腾堡区块、Elementor、WPBakery还是其他主题自带的可视化编辑器）的内置交互功能就能完成：

1. 选中原来的产品描述详情框，把它的默认显示状态从「展示」改成默认隐藏
2. 找到这个隐藏内容块的触发源设置，把原来绑定的「描述框本身」，替换成同组对应的产品图片
3. 删掉原有“点击描述框展示内容”的规则，保存后前台测试，确认点击A产品的图片只会弹出A对应的描述框，不会串到其他产品的内容

• 小技巧：如果构建器的触发源不支持直接绑定图片，就把产品图片外面套一个无样式的透明按钮区块，把触发规则绑在这个透明按钮上，视觉上不会对原有排版造成任何影响

路径2：轻量代码自定义（适合想要灵活调整动画、对齐参考效果的用户） #

代码量非常少，不需要安装额外的交互插件，只需要在WordPress后台的自定义CSS、自定义HTML区块（或者子主题的对应文件里）添加，不要直接修改父主题的核心文件，避免主题更新后配置丢失：

1. 先加CSS设置描述框的默认隐藏状态，给所有需要调整的描述框加统一类名（比如示例里的product-desc）：

.product-desc {
  display: none;
  /* 可以在这里加自定义的渐入过渡效果，和参考的Shopify站点交互对齐 */
  transition: opacity 0.3s ease;
}

2. 再绑定点击图片的触发逻辑，给所有对应产品图片加统一类名（比如示例里的product-img），把每一组产品的外层容器加统一类名（比如示例里的product-item）：

// 遍历所有产品图片，绑定点击切换事件
document.querySelectorAll('.product-img').forEach(img => {
  img.addEventListener('click', function() {
    // 定位当前图片所在的独立产品模块，找到对应的描述框
    const targetDesc = this.closest('.product-item').querySelector('.product-desc');
    // 切换描述框的显示/隐藏状态
    targetDesc.style.display = targetDesc.style.display === 'block' ? 'none' : 'block';
  })
})

注：上述代码里的类名都是示例值，实际使用时需要替换成你自己页面中对应元素的真实类名，否则选择器匹配不到目标元素，交互不会生效。

• 绑定事件的时候一定要限定选择器范围，不要写全局针对所有图片的规则，避免用户点到站里其他无关图片也弹出隐藏模块
• 如果站点装了缓存插件，改完配置一定要清完缓存再前台测试，否则容易因为缓存残留看到旧的交互效果
• 移动端预览的时候要确认图片的点击热区足够大，不会出现点偏触发不了交互的问题

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