CSS-Kontrollkästchen: aktiviert Nicht mit zwei Optionen arbeiten

Question

Ich versuche, zwei verschiedene Menüs mit zwei verschiedenen Checkbox-Togles zu erstellen: checked method. Aus irgendeinem Grund kann ich nicht zwei Schalter haben, obwohl jedes Kontrollkästchenfeld unterschiedliche IDs hat. Hier

ist das, was ich arbeite mit: 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> 

Die zweite Option Toggle funktioniert gut, aber das erste funktioniert nur, wenn ich die zweite entfernen. Irgendwelche Gedanken darüber, was ich falsch mache? Ist das nicht möglich?

Answer 1

ändern + zu ~

.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

Weitere Informationen:

+ Direct adjacent combinator

~ Indirect adjacent combinator

Answer 2

Sie verwenden nur nicht die beste Auswahl: versuchen Sie "~" anstelle von "+". Überprüfen Sie Unterschiede in CSS 3

Viel Glück.