求助：无JS实现checkbox:checked控制dropup-content显示失效问题

DevOps 小满

2026-7-27

问题根源

你写的SCSS选择器逻辑有误——.dropup-content是<label>的同级元素，并非<span>的子元素，所以嵌套在input:checked + span里的.dropup-content根本选不到目标元素，自然不会生效。

修正方案

要选中<label>的同级.dropup-content，可以用CSS的:has()伪类（当前移动端主流浏览器均支持），通过父元素的状态关联兄弟元素样式。

修改后的完整SCSS代码：

// 默认隐藏下拉内容（必须补充基础样式）
.dropup-content {
  visibility: collapse;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s, visibility 0.2s;
}

// 勾选checkbox时显示下拉内容
label:has(input:checked) ~ .dropup-content {
  visibility: visible;
  max-height: 250px;
}

// 保留你需要的文字变色效果
input:checked + span {
  color: orange;
}

兼容性备选方案（适配不支持`:has()`的旧浏览器）

如果需要兼容老旧移动端浏览器，可以调整HTML结构，把<input>移到<label>外面，用相邻兄弟选择器实现：

<input type="checkbox" id="sports" class="checkbox">  
<label for="sports">  
  <span class="span-label">Sports</span>  
</label>  
<div class="dropup-content">  
  <a href="">More...</a>  
  <a href="">Esports</a>  
  <a href="">Handball</a>  
  <a href="">Basketball</a>  
  <a href="">Football</a>  
</div>

对应的SCSS代码：

.dropup-content {
  visibility: collapse;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s, visibility 0.2s;
}

input:checked + label ~ .dropup-content {
  visibility: visible;
  max-height: 250px;
}

input:checked + label span {
  color: orange;
}