CSS侧边菜单通过radio单选框控制隐藏子菜单展开收起的实现问题

问题根源 #

• 你的CSS使用了通用兄弟选择器~匹配选中单选框后的所有元素：input[type="radio"]:checked~*会选中当前被选中单选框之后所有同级元素，所以点击第一个单选框会匹配到后面3个下拉容器，点击第二个匹配到后面2个，完全对应你遇到的异常现象。
• 箭头旋转的选择器.radio:checked无效，你没有给单选框添加.radio类，选择器规则不生效。
• HTML中所有下拉箭头的<span>标签没有闭合，存在语法小问题。

修复方案 #

修改CSS下拉与箭头规则 #

把原来的两段规则：

/* Show dropdown collapse */
input[type="radio"]:checked~*,
.nav__dropdown::before {
  max-height: 100rem;
  transition: all 1.7s ease-in .2s;
}

/* Rotate icon arrow */
.radio:checked .nav__dropdown-icon::before {
  transform: rotate(180deg);
}

替换为以下内容：

/* 仅选中当前单选框后紧邻的对应下拉容器展开 */
input[type="radio"]:checked + .nav__dropdown {
  max-height: 100rem;
  transition: all 1.7s ease-in .2s;
}

/* 仅旋转当前选中项对应的下拉箭头 */
input[type="radio"]:checked + .nav__dropdown .nav__dropdown-icon {
  transform: rotate(180deg);
}

修复HTML语法问题 #

把所有未闭合的下拉箭头span标签补全闭合，例如将<span class='bx bx-chevron-down nav__icon nav__dropdown-icon' </span>修改为<span class='bx bx-chevron-down nav__icon nav__dropdown-icon'></span>

修改完成后单选框即可正常控制对应下拉项的单独展开收起，其他项自动关闭。

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