Question

我正在尝试创建两个不同的菜单，使用两个不同的复选框切换：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>

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

Answer 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

Answer 2

你只是使用不是最好的选择器：试试＆＃34;〜＆＃34;而不是＆＃34; +＆＃34;。检查CSS 3

中的差异祝你好运。

CSS Checkbox：选中不使用两个切换

2 个答案: