页面刷新/进入时默认显示可折叠足球场地的实现问题

你的需求是让足球场地图片初始可见，用户可通过按钮折叠隐藏，但当前代码默认是隐藏状态，只需调整两处即可实现反转：

修改步骤 #

1. 调整HTML复选框初始状态 #

移除<input>标签的checked属性，让复选框默认未选中，对应图片初始可见：

<div class="game-board">
  <input id="field" type="checkbox" />
  <label for="field"><img class="football" src="img/Saints_Football_field.png" alt="Home Field"></label>
</div>

2. 优化CSS确保显示逻辑正确 #

给图片添加初始最大宽度和过渡动画，让切换更流畅，同时保留原有选中状态的样式逻辑：

.game-board {
  display: block;
  font-size: 1.5rem;
  text-align: center;
  color: #dcdcdc;
}

label::before {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  content: '-'; /* 默认显示减号，表示可折叠 */
  margin-right: 20px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer; /* 提示可点击 */
}

input[type="checkbox"] {
  display: none;
}

.football {
  width: 90%;
  max-width: 100%; /* 初始占满可用宽度 */
  overflow: hidden; /* 配合max-width隐藏超出部分 */
  transition: max-width 0.3s ease; /* 添加平滑过渡动画 */
}

/* 选中复选框时，按钮切换为加号 */
.game-board input[type="checkbox"]:checked+label::before {
  content: '+';
}

/* 选中复选框时，收缩图片至隐藏 */
.game-board input[type="checkbox"]:checked+label .football {
  max-width: 0;
}

逻辑说明 #

• 默认状态（复选框未选中）：图片正常显示，按钮显示-，提示用户可点击隐藏。
• 点击后状态（复选框选中）：图片通过max-width:0收缩隐藏，按钮切换为+，提示用户可点击展开。

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