纯CSS实现含选项菜单切换：点击选项自动关闭的方案问询

完全可以不用JavaScript搞定这个需求！我先帮你指出原代码里的两个小问题，再给你调整后的可行方案：

原代码的问题 #

• HTML结构问题：HTML规范里<label>标签不能嵌套其他<label>，这种嵌套会导致点击事件混乱，浏览器可能无法正确触发对应的输入框状态变化。
• CSS语法错误：原代码里的#menu:~.opener是无效写法，正确的兄弟选择器应该是#menu~.opener（去掉冒号）。

调整后的完整代码 #

CSS部分 #

input { display: none; }
label { cursor: pointer; }
label span:hover { font-weight: 600; }

/* 菜单基础样式 */
.opener .menu {
  background-color: #f3f3f3;
  display: none; /* 默认隐藏菜单 */
  flex-direction: column;
  color: #4d4d4d;
  padding: 12px 4px;
  width: 270px;
}

/* 点击"Open"按钮显示菜单 */
#menu:checked~.opener .menu { display: flex; }

/* 切换开闭按钮的显示状态 */
#menu~.opener>span:nth-of-type(1) { display: block; } /* 默认显示Open */
#menu~.opener>span:nth-of-type(2) { display: none; } /* 默认隐藏Close */
#menu:checked~.opener>span:nth-of-type(1) { display: none; } /* 菜单打开时隐藏Open */
#menu:checked~.opener>span:nth-of-type(2) { display: block; } /* 菜单打开时显示Close */

/* 颜色盒子样式 */
.box {
  height: 50px;
  width: 50px;
  margin: 20px 0;
  background-color: red; /* 默认红色，对应选中的red radio */
}
#red:checked~.box { background-color: red; }
#blue:checked~.box { background-color: blue; }
#green:checked~.box { background-color: green; }

/* 核心逻辑：选中任意颜色选项时关闭菜单 */
#red:checked~.opener .menu,
#blue:checked~.opener .menu,
#green:checked~.opener .menu {
  display: none;
}
/* 选中任意颜色选项时，切换回显示"Open"按钮 */
#red:checked~.opener>span:nth-of-type(1),
#blue:checked~.opener>span:nth-of-type(1),
#green:checked~.opener>span:nth-of-type(1) {
  display: block;
}
#red:checked~.opener>span:nth-of-type(2),
#blue:checked~.opener>span:nth-of-type(2),
#green:checked~.opener>span:nth-of-type(2) {
  display: none;
}

HTML部分 #

<input id="menu" type="checkbox">
<input id="red" type="radio" name="opcoes" checked>
<input id="blue" type="radio" name="opcoes">
<input id="green" type="radio" name="opcoes">

<label class="opener" for="menu">
  <span>Open</span>
  <span>Close</span>
</label>
<!-- 把菜单容器移到opener外面，避免label嵌套 -->
<div class="menu">
  <label for="red"><span>red</span></label>
  <label for="blue"><span>blue</span></label>
  <label for="green"><span>green</span></label>
</div>

<div class="box"></div>

关键逻辑说明 #

1. 修复HTML结构：把菜单的<div class="menu">从<label class="opener">里移出来，彻底避免label嵌套的问题，让每个label都只对应自己的输入框。
2. 默认菜单隐藏：修改菜单的默认状态为display: none，只有当#menu checkbox被选中时才显示。
3. 选中选项关闭菜单：利用CSS的兄弟选择器(~)，当任意一个颜色radio被选中时，找到后面的.menu容器，设置它为隐藏，同时切换回显示"Open"按钮。这样点击任意颜色选项后，菜单就会自动关闭啦～

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