点击事件监听异常：始终仅保留首个.item元素隐藏其余元素

核心问题 #

你遇到的问题本质是获取元素或绑定事件时仅选中了第一个.item元素——比如用document.querySelector('.item')（只返回首个匹配元素）而非document.querySelectorAll('.item')（返回所有匹配元素），或是事件逻辑里硬编码操作第一个元素，没有动态区分当前点击的目标。

修复步骤 #

1. 正确遍历所有.item绑定点击事件 #

用querySelectorAll获取全部区块，逐个绑定点击逻辑：

// 获取所有.item元素
const items = document.querySelectorAll('.item');

items.forEach(item => {
  item.addEventListener('click', function() {
    // 判断当前元素是否处于展开状态
    const isExpanded = this.classList.contains('expanded');
    
    if (isExpanded) {
      // 恢复原状态：移除展开类，显示所有元素
      this.classList.remove('expanded');
      items.forEach(i => i.style.display = 'block'); // 替换为你原本的显示样式
    } else {
      // 展开当前元素：添加展开类，隐藏其他元素
      this.classList.add('expanded');
      items.forEach(i => {
        if (i !== this) i.style.display = 'none';
      });
    }
  });
});

2. 配合CSS准备动画基础 #

提前给.expanded类定义展开样式（后续可直接添加动画）：

.item {
  /* 基础样式：设置过渡效果方便后续加动画 */
  width: 200px;
  height: 120px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.item.expanded {
  /* 展开后的样式：根据需求调整 */
  width: 100%;
  height: 450px;
}

3. 关键注意点 #

• 必须用querySelectorAll获取所有.item，不能用querySelector只拿单个元素
• 事件处理函数里用this（或event.target）指代当前点击的元素，不要固定操作第一个元素
• 用类名控制状态，后续添加@keyframes动画或更复杂的过渡效果会更方便

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