CSS複選框：選中不使用兩個切換

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

您只是使用不是最好的選擇器：嘗試「〜」而不是「+」。檢查差異CSS 3

祝你好運。