CSS Checkbox :checked 不使用两个切换答案

【问题标题】：CSS Checkbox :checked Not Working with Two TogglesCSS Checkbox :checked 不使用两个切换
【发布时间】：2016-03-22 03:27:32
【问题描述】：

我正在尝试使用 :checked 方法创建两个具有两个不同复选框切换的不同菜单。出于某种原因，即使每个复选框字段具有不同的 ID，我也不能有两个切换。

这是我正在使用的：https://jsfiddle.net/keithpetrillo/owm1vk8t/

<input type="checkbox" id="menu-toggle-left">
<input type="checkbox" id="menu-toggle-right">

<div class="mobile-menu-wrap">

    <div class="mobile-menu-left">
        First Menu
    </div>

    <div class="mobile-menu-right">
        Second Menu
    </div>

</div>

第二个复选框切换工作正常，但第一个只有在我删除第二个时才有效。对我做错了什么有任何想法吗？这不可能吗？

【问题讨论】：

标签： html css checkbox

【解决方案1】：

将+ 更改为~

.mobile-menu-left, .mobile-menu-right {
  display: none;
}

#menu-toggle-left:checked ~ .mobile-menu-wrap {
  .mobile-menu-left {
    display: block;
  }
}

#menu-toggle-right:checked ~ .mobile-menu-wrap {
  .mobile-menu-right {
    display: block;
  }
}

Demo

更多信息：

+ Direct adjacent combinator

~ Indirect adjacent combinator

【讨论】：

【解决方案2】：

您只是使用不是最佳选择器：尝试使用“~”而不是“+”。检查CSS 3中的差异

祝你好运。

【讨论】：