网格布局交互优化：单展开控制、函数复用及类操作问题

问题梳理 #

实现了3列Grid布局，点击div可通过切换span类实现跨整行展开/收起，需解决以下问题：

1. 点击新div时自动关闭其他已展开的div，确保同一时间仅一个div展开；
2. 仅当父div展开时，显示其内部h1旁的信息div（控制hidesINFO类的显示/隐藏），是否需要为每个div单独写函数？
3. 当前每个div对应一个重复的toggle函数，如何优化以避免重复代码？
4. 是否可以使用siblings()方法移除兄弟元素的类？示例代码是否可行？

逐个问题解答 #

1. 点击新div自动关闭其他展开项 #

核心逻辑：每次点击时，先清除所有Grid子元素的span类，再对当前点击的元素进行类切换——如果当前元素原本未展开则添加span类，若已展开则移除类实现收起。

2. 控制内部信息div的显示/隐藏 #

不需要为每个div单独写函数。可以直接通过CSS嵌套规则，利用父元素的span类状态控制子元素的显示，或者在统一的JS逻辑中判断父类状态操作子元素类名，二选一即可。

3. 优化重复的toggle函数 #

用单个通用函数替代所有重复的togglesX()函数：

• 移除HTML中每个div的onclick属性，改用事件委托给父容器绑定点击事件；
• 通过事件对象event获取当前点击的元素，无需依赖元素id。

4. siblings()方法的可行性 #

原生JavaScript中没有siblings()方法，这是jQuery专属API，所以你提供的测试代码不可行。原生JS中需要通过父元素获取所有子元素，再遍历排除当前元素来操作兄弟节点。

优化后的完整代码 #

HTML代码 #

<div id="gridALBUM">
  <div>  
    <h1>1</h1> 
    <div class="hidesINFO"><h2>one</h2></div>
  </div>
  <div>  
    <h1>2</h1> 
    <div class="hidesINFO"><h2>two</h2></div>
  </div> 
  <div>  
    <h1>3</h1> 
    <div class="hidesINFO"><h2>three</h2></div>
  </div>
  <div>  
    <h1>4</h1> 
    <div class="hidesINFO"><h2>four</h2></div>
  </div>
  <div>  
    <h1>5</h1> 
    <div class="hidesINFO"><h2>five</h2></div>
  </div>
  <div>  
    <h1>6</h1> 
    <div class="hidesINFO"><h2>six</h2></div>
  </div>
  <div>  
    <h1>7</h1> 
    <div class="hidesINFO"><h2>seven</h2></div>
  </div>
  <div>  
    <h1>8</h1> 
    <div class="hidesINFO"><h2>eight</h2></div>
  </div>
  <div>  
    <h1>9</h1> 
    <div class="hidesINFO"><h2>nine</h2></div>
  </div>
  <div>  
    <h1>10</h1> 
    <div class="hidesINFO"><h2>ten</h2></div>
  </div>
</div>

CSS代码 #

#gridALBUM {
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  background-color: lightblue;
}

#gridALBUM > div {
  border: 1px solid black;
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.hidesINFO {
  display: none;
  margin-left: 20px;
}

.span {
  grid-column: 1 / 4;
  background-color: blue;
  color: white;
}

/* 直接通过父类状态控制子元素显示，无需JS额外操作 */
.span .hidesINFO {
  display: block;
}

JavaScript代码 #

const gridContainer = document.getElementById('gridALBUM');
const gridItems = gridContainer.querySelectorAll('div');

gridContainer.addEventListener('click', function(e) {
  // 确保点击的是Grid的直接子div，避免点击内部h1/h2触发错误逻辑
  const targetItem = e.target.closest('#gridALBUM > div');
  if (!targetItem) return;

  // 移除所有兄弟元素的span类
  gridItems.forEach(item => {
    if (item !== targetItem) {
      item.classList.remove('span');
    }
  });

  // 切换当前元素的span类
  targetItem.classList.toggle('span');
});

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