如何在input复选框选中时切换多级下拉菜单的下拉图标？

我看了你的代码，核心问题出在CSS选择器的层级匹配错误上——你写的.cd-accordion-menu input[type=checkbox]:checked .has-dropdown::after试图选中被勾选的input内部的.has-dropdown元素，但实际上input和label是相邻兄弟关系，.has-dropdown是嵌套在label标签里的，这个选择器根本找不到目标元素。

下面是具体的修正方案：

步骤1：修正核心选择器 #

把你原来的错误选择器：

.cd-accordion-menu input[type=checkbox]:checked .has-dropdown::after{
  /* 你的样式 */
}

替换成：

.cd-accordion-menu input[type=checkbox]:checked + label .has-dropdown::after{
  /* 修改后的样式 */
}

这个选择器的逻辑是：

• 找到被勾选的input[type=checkbox]
• 选择它紧邻的兄弟元素label
• 再选中label内部的.has-dropdown元素的伪元素::after

步骤2：调整图标切换的样式 #

默认状态下.has-dropdown::after用的是menu-down.png，勾选后你可以选择替换成另一张图标（比如menu-up.png），或者通过旋转现有图标实现切换效果（这种方式更高效）。这里我用旋转动画做示例：

/* 默认下拉图标样式（添加过渡动画让切换更平滑） */
.has-dropdown::after {
  content: "";
  width: 15px;
  height: 15px;
  background: url(../img/menu-down.png);
  background-size: 15px;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  top: 4px;
  left: 24px;
  transition: transform 0.2s ease;
}

/* 勾选后的图标状态：旋转180度变成向上箭头 */
.cd-accordion-menu input[type=checkbox]:checked + label .has-dropdown::after{
  transform: rotate(180deg);
  /* 如果要替换成新图标，就改成：
  background: url(../img/menu-up.png);
  */
}

步骤3：适配子菜单的图标切换 #

你的代码里还有子菜单（Sub 1），同样需要给它的选择器做相同修正，确保子菜单点击时图标也能切换：

/* 子菜单勾选后的图标切换 */
.cd-accordion-menu ul input[type=checkbox]:checked + label .has-dropdown::after{
  transform: rotate(180deg);
}

完整修正后的关键CSS片段 #

把核心修改整合后的代码如下（保留你原有其他样式）：

/* 默认下拉图标样式 */
.has-dropdown::after {
  content: "";
  width: 15px;
  height: 15px;
  background: url(../img/menu-down.png);
  background-size: 15px;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  top: 4px;
  left: 24px;
  transition: transform 0.2s ease;
}

/* 主菜单勾选后的图标切换 */
.cd-accordion-menu input[type=checkbox]:checked + label .has-dropdown::after{
  transform: rotate(180deg);
}

/* 子菜单勾选后的图标切换 */
.cd-accordion-menu ul input[type=checkbox]:checked + label .has-dropdown::after{
  transform: rotate(180deg);
}

/* 保留你原有的其他样式 */
.menu-down { 
  height: 7px !important; 
  position: relative !important; 
  left: 8px !important; 
  top: -4px !important; 
  margin-right: 0px !important; 
}
.cd-accordion-menu { 
  margin: auto; 
}
/* ... 其他原有样式省略 ... */

为什么原来的代码不生效？ #

再明确一下：CSS选择器的层级必须严格匹配DOM结构。你的DOM结构是input → label → .has-dropdown，所以必须用**相邻兄弟选择器+**关联input和label，再从label内部定位.has-dropdown。你原来的选择器直接在checked的input后面找.has-dropdown，但input是自闭合标签，不可能包含子元素，所以完全匹配不到目标。

这样修改后，点击“Featured News”或者“Sub 1”时，对应的下拉图标就会顺利切换了。

内容的提问来源于stack exchange，提问作者Dr. Kirit Kumar Saha