如何让未显示列折叠，设置display:none后不占用页面空间？

问题根源 #

你当前将display:none应用在列内部的内容容器（如hawksSalary），但外层的.column容器仍保留，且CSS中.row > *设置了flex: 0 0 25vw，导致每个.column固定占用25vw宽度，即使内部内容隐藏，容器本身仍会占据空间。

解决步骤 #

1. 控制外层.column的显示状态：点击球队时，切换对应列的display属性，而非仅切换内部内容容器。
2. 优化CSS：调整flex属性，让列可以根据布局自动调整空间，同时确保隐藏时完全脱离文档流。
3. 简化JS代码：用通用函数减少重复逻辑，避免冗余代码。

修改后的完整代码 #

<script>
// 通用切换函数，接收目标列ID和球队按钮ID
function toggleColumn(columnId, teamBtnId) {
  const column = document.getElementById(columnId);
  const teamBtn = document.getElementById(teamBtnId);
  
  if (column.style.display === "none") {
    column.style.display = "block";
    teamBtn.style.backgroundColor = "red";
  } else {
    column.style.display = "none";
    teamBtn.style.backgroundColor = "white";
  }
}
</script>

<style>
.row {
  display: flex;
  flex-wrap: wrap; /* 列过多时自动换行，可选 */
}

.row .column {
  flex: 1 0 25vw; /* 允许列自动填充剩余空间 */
  margin: 0 8px; /* 添加间距，优化视觉效果 */
}
</style>

<center><header><h2>NBA Trade Maker</h2></center>
<nav>
<center>
<table>
<tr>
<th>Atlantic Division</th>
<th>Central Division</th>
<th>Southeast Division</th>
<th>Northwest Division</th>
<th>Southwest Division</th>
<th>Pacific Division</th>
</tr>
<tr>
<td id="BostonCeltics" onclick="toggleColumn('celticsColumn', 'BostonCeltics')">Boston Celtics</td>
<td>Chicago Bulls</td>
<td id="AtlantaHawks" onclick="toggleColumn('hawksColumn', 'AtlantaHawks')">Atlanta Hawks</td>
<td>Denver Nuggets</td>
<td>Dallas Mavericks</td>
<td>Golden State Warriors</td>
</tr>
<tr>
<td id="BrooklynNets" onclick="toggleColumn('netsColumn', 'BrooklynNets')">Brooklyn Nets</td>
<td>Cleveland Cavaliers</td>
<td>Charlotte Hornets</td>
<td>Minnesota Timberwolves</td>
<td>Houston Rockets</td>
<td>Los Angeles Clippers</td>
</tr>
<tr>
<td id="NYKnicks" onclick="toggleColumn('knicksColumn', 'NYKnicks')">New York Knicks</td>
<td>Detroit Pistons</td>
<td>Miami Heat</td>
<td>Oklahoma City Thunder</td>
<td>Memphis Grizzlies</td>
<td>Los Angeles Lakers</td>
</tr>
<tr>
<td>Philadelphia 76ers</td>
<td>Indiana Pacers</td>
<td>Orlando Magic</td>
<td>Portland Trail Blazers</td>
<td>New Orleans Pelicans</td>
<td>Phoenix Suns</td>
</tr>
<tr>
<td>Toronto Raptors</td>
<td>Milwaukee Bucks</td>
<td>Washington Wizards</td>
<td>Utah Jazz</td>
<td>San Antonio Spurs</td>
<td>Sacramento Kings</td>
</tr>
</table>
</center>
<br><br><br>

<div class="row">
  <!-- 给每个需要切换的列添加唯一ID -->
  <div class="column" id="hawksColumn" style="display:none">
    <h2>Atlanta Hawks</h2>
    <p>Trae Young (Salary Here) Send To:
    <select>
      <option value="Audi">Audi</option>
      <option value="BMW">BMW</option>
      <option value="Mercedes">Mercedes</option>
      <option value="Volvo">Volvo</option>
    </select></p>
  </div>
  <div class="column" id="celticsColumn" style="display:none">
    <p id="traeYoungToCeltics" style="display:none">Trae Young</p>
    <h2>Boston Celtics</h2>
    <p>Some text..</p>
  </div>
  <div class="column" id="netsColumn" style="display:none">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
  <div class="column">
    <h2>Column 5</h2>
    <p>Some text..</p>
  </div>
  <div class="column">
    <h2>Column 6</h2>
    <p>Some text..</p>
  </div>
  <div class="column">
    <h2>Column 7</h2>
    <p>Some text..</p>
  </div>
  <div class="column">
    <h2>Column 8</h2>
    <p>Some text..</p>
  </div>
</div>

关键修改说明 #

• JS层面：用通用函数toggleColumn统一处理所有球队的切换逻辑，直接控制对应.column的显示状态，同时同步按钮背景色变化。
• CSS层面：将.row > *的flex: 0 0 25vw改为flex: 1 0 25vw，允许列在其他列隐藏时自动填充剩余空间；添加flex-wrap: wrap避免列溢出。
• HTML层面：给每个需要切换的列添加唯一ID，修改onclick事件调用通用函数，移除内部冗余的嵌套容器，简化结构。

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