点击按钮/图片切换列内容 隐藏图片显示文本的jQuery代码问题排查

一、HTML 错误 #

• 所有<img>标签的资源属性拼写错误，你写的是scr，正确属性名是src，会导致图片无法正常加载。

二、JS 错误 #

• 父容器选择器错误：closest('col-b2b')是查找标签名为col-b2b的元素，而你的列容器是类名col-b2b，需要写成closest('.col-b2b')（前面加类选择符.），否则无法找到正确的父容器，类切换逻辑完全不生效。
• 未给图片绑定点击事件：当前仅给.b2b-btn绑定了点击触发逻辑，没有给.b2b-image绑定，无法实现点击图片也触发切换的需求。
• 不支持收起当前展开列：现有逻辑每次点击都会先重置所有列状态，再给当前列加展开类，点击已展开的列无法收回，不符合通用交互习惯。

三、CSS 问题 #

• 图片切换无过渡：.hideb2bimage类没有添加过渡属性，图片显示/隐藏会直接跳变，和文本的渐变动画不一致。
• 高度过渡缺失：文本和图片仅配置了可见性、透明度的过渡，height从0切换为auto不会触发过渡效果，会出现布局跳变。
• 缺少溢出隐藏：未配置overflow: hidden，高度为0时如果内容溢出仍会显示异常。

修正后JS代码 #

// 同时给按钮和图片绑定点击事件
jQuery(".b2b-btn, .b2b-image").click(function() {
  const currentCol = jQuery(this).closest('.col-b2b');
  const isCurrentExpanded = currentCol.find(".b2b-text").hasClass('expanded');
  
  // 重置所有列的状态
  jQuery(".b2b-image").removeClass('hideb2bimage');
  jQuery(".b2b-text").removeClass('expanded');

  // 仅当前列未展开时才执行展开操作，实现点击已展开列可收回
  if (!isCurrentExpanded) {
    currentCol.find(".b2b-image").addClass('hideb2bimage');
    currentCol.find(".b2b-text").addClass('expanded');
  }
});

修正后CSS代码 #

.b2b-image {
  max-height: 300px; /* 按实际图片高度调整 */
  overflow: hidden;
  transition: all 0.5s ease;
}
.hideb2bimage {
  max-height: 0;
  visibility: hidden;
  opacity: 0;
}

.b2b-text {
  max-height: 0;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}
.expanded {
  max-height: 300px; /* 按实际文本最大高度调整，设置足够大的值即可 */
  visibility: visible;
  opacity: 1;
}

HTML修正点 #

把所有<img>标签的scr属性修改为src即可。

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