CSS/Angular实现点击Tile展开div并隐藏原Tile的技术求助

看起来你已经搞定了展开div的显隐，就差隐藏被点击的原Tile和处理其他Tile的逻辑了，我来帮你补全这部分功能～

核心思路 #

点击Tile时，我们需要完成三件核心操作：

1. 隐藏被点击的原Tile
2. 显示对应的展开div
3. 根据点击的是Animals还是Plants，分别处理其他Tile的状态（替换/重排）

代码实现示例 #

假设你的HTML结构大致如下：

<div class="tiles-container">
  <div class="tile" id="animals-tile">Animals</div>
  <div class="tile" id="plants-tile">Plants</div>
  <div class="tile" id="other-tile">Other</div>
</div>

<!-- 展开的div，默认隐藏 -->
<div class="expanded-div hidden" id="animals-expanded">
  <button class="close-btn">关闭</button>
  <p>这里是Animals的展开内容</p>
</div>
<div class="expanded-div hidden" id="plants-expanded">
  <button class="close-btn">关闭</button>
  <p>这里是Plants的展开内容</p>
</div>

先定义一个CSS类统一控制显隐，比直接修改style更易维护：

.hidden {
  display: none !important;
}

/* 基础布局样式，可根据需求调整 */
.tiles-container {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tile {
  padding: 1rem 2rem;
  background: #eee;
  cursor: pointer;
  transition: background 0.2s;
}

.tile:hover {
  background: #ddd;
}

.expanded-div {
  padding: 1.5rem;
  background: #f5f5f5;
}

.close-btn {
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

接下来编写JavaScript交互逻辑：

// 获取所有需要操作的元素
const tilesContainer = document.querySelector('.tiles-container');
const animalsTile = document.getElementById('animals-tile');
const plantsTile = document.getElementById('plants-tile');
const otherTile = document.getElementById('other-tile');
const animalsExpanded = document.getElementById('animals-expanded');
const plantsExpanded = document.getElementById('plants-expanded');
const closeBtns = document.querySelectorAll('.close-btn');

// Animals Tile点击事件
animalsTile.addEventListener('click', () => {
  // 1. 隐藏当前点击的Tile
  animalsTile.classList.add('hidden');
  // 2. 显示对应的展开div
  animalsExpanded.classList.remove('hidden');
  
  // 3. 处理其他Tile：替换（示例为隐藏Plants，替换Other的内容）
  plantsTile.classList.add('hidden');
  otherTile.innerHTML = '替换后的自定义内容';
});

// Plants Tile点击事件
plantsTile.addEventListener('click', () => {
  // 1. 隐藏当前点击的Tile
  plantsTile.classList.add('hidden');
  // 2. 显示对应的展开div
  plantsExpanded.classList.remove('hidden');
  
  // 3. 处理其他Tile：重新排列（示例改为垂直布局并调整顺序）
  tilesContainer.style.flexDirection = 'column';
  animalsTile.style.order = 2;
  otherTile.style.order = 1;
});

// 关闭按钮事件：恢复初始状态
closeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 隐藏展开的div
    btn.parentElement.classList.add('hidden');
    
    // 恢复所有Tile的显示
    animalsTile.classList.remove('hidden');
    plantsTile.classList.remove('hidden');
    otherTile.classList.remove('hidden');
    
    // 恢复Other Tile的原始内容
    otherTile.innerHTML = 'Other';
    
    // 恢复布局到初始状态
    tilesContainer.style.flexDirection = '';
    animalsTile.style.order = '';
    otherTile.style.order = '';
  });
});

关键说明 #

• 用classList.add/remove控制显隐，比直接修改style.display更灵活，方便后续扩展样式
• 针对Animals和Plants的不同需求，分别写了替换和重排的示例逻辑，你可以根据实际需求调整（比如替换成特定组件、用Grid重排布局等）
• 额外添加了关闭按钮的逻辑，确保用户可以回到初始状态，提升整体交互体验

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