Html CSS复选框：选中不使用两个切换

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

以下是我的工作内容：

第一菜单
第二菜单

第二个复选框切换可以正常工作，但第一个复选框仅在删除第二个复选框时有效。有没有想过我做错了什么？这不可能吗？

更改为

更多信息：

更改为

更多信息：

---

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

---

祝你好运。

你只是用了不是最好的选择器：用“~”代替“+”。检查差异

祝你好运

<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>

.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;
  }
}