实现点击信息卡片展开面板时，关闭其他同类名的面板

嘿，这个场景我刚好处理过！核心思路就是精准区分当前要操作的面板和其他同类型面板，只对“非当前”的展开面板执行收起操作。我给你分两种常用的实现方式，你可以根据自己的项目技术栈选：

原生JavaScript实现（无框架） #

假设你的面板类名叫info-panel，展开状态会加一个expanded类来标识，“更多信息”按钮的类是show-more-btn。代码逻辑大概是这样：

// 给所有"更多信息"按钮绑定点击事件
const showMoreBtns = document.querySelectorAll('.show-more-btn');

showMoreBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 第一步：找到当前按钮对应的面板（这里假设按钮和面板在同一个卡片容器里，你可以根据自己的DOM结构调整）
    const currentPanel = this.closest('.card').querySelector('.info-panel');
    
    // 第二步：选中所有同类型面板，排除当前要操作的这个
    const allPanels = document.querySelectorAll('.info-panel');
    allPanels.forEach(panel => {
      if (panel !== currentPanel && panel.classList.contains('expanded')) {
        // 对已经展开的其他面板执行收起逻辑：移除展开类，还原动画样式
        panel.classList.remove('expanded');
        panel.style.transform = 'translateY(100%)'; // 这里对应你之前写的向上滑出/收起的动画
      }
    });
    
    // 第三步：切换当前面板的展开/收起状态
    currentPanel.classList.toggle('expanded');
    currentPanel.style.transform = currentPanel.classList.contains('expanded') 
      ? 'translateY(0)' 
      : 'translateY(100%)';
  });
});

如果你的按钮和面板是通过data-target属性关联的（比如按钮上写data-target="#panel-1"），那可以把获取当前面板的代码改成：

const currentPanel = document.querySelector(this.dataset.target);

这种方式更灵活，不管DOM结构怎么变都能精准定位。

jQuery实现（如果项目用jQuery的话） #

用jQuery的话代码会简洁很多，逻辑是一样的：

$('.show-more-btn').on('click', function() {
  // 找到当前按钮对应的面板
  const $currentPanel = $(this).closest('.card').find('.info-panel');
  
  // 关闭所有其他已经展开的面板：选中带expanded类的面板，排除当前的，然后移除类+还原样式
  $('.info-panel.expanded').not($currentPanel).removeClass('expanded').css('transform', 'translateY(100%)');
  
  // 切换当前面板的状态
  $currentPanel.toggleClass('expanded').css('transform', $currentPanel.hasClass('expanded') ? 'translateY(0)' : 'translateY(100%)');
});

几个关键注意点： #

1. 一定要有展开状态的标识：比如expanded类，这样才能准确判断哪些面板是打开的，避免误操作。
2. DOM选择器要精准：用.closest('.card')定位到卡片容器，再找里面的面板，这样不会误选中页面其他地方的同名面板。
3. 动画逻辑要和你之前的实现匹配：比如你之前用height或者opacity做动画，就把代码里的transform改成对应的样式操作就行。

另外，你已经实现的“关闭”和“立即观看”按钮的收起逻辑，只需要针对当前面板执行移除expanded类和动画即可——因为我们已经在打开新面板时关闭了其他所有展开的面板，所以同一时间只会有一个面板处于展开状态。

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