2016-06-06 10 views
0

Ich versuche einen Wechsel für das mobile Menü zu erstellen, aber der :checked Selektor scheint nicht zu funktionieren. HierMenü ausblenden, wenn Häkchen gesetzt ist

ist der Code:

#toggleMenuToggle:checked .nav-css { 
 
    display: none; 
 
}
<label class="desktop-hidden menuToggle" for="toggleMenuToggle">MENU</label> 
 
<input type="checkbox" name="toggleMenuToggle" id="toggleMenuToggle"> 
 
<ul id="dropdown-nav" class="nav-css"> 
 
    <li class="n1 current"> 
 
    <a class="n1">Test</a> 
 
    </li> 
 
</ul>

Sollte nicht die <ul> haben es Anzeige auf keine, wenn meine Kontrollkästchen aktiviert ist?

Antwort

6

Versuchen Sie, die folgende Lösung:

#toggleMenuToggle:checked ~ .nav-css { 
 
    display: none; 
 
}
<label class="desktop-hidden menuToggle" for="toggleMenuToggle">MENU</label> 
 
<input type="checkbox" name="toggleMenuToggle" id="toggleMenuToggle"> 
 
<ul id="dropdown-nav" class="nav-css"> 
 
    <li class="n1 current"> 
 
    <a class="n1">Test</a> 
 
    </li> 
 
</ul>

Erläuterung: Mit Ihrer Lösung des .nav-css Element haben ein Kind der Checkbox (#toggleMenuToggle) sein. Aber in Ihrem Fall ist das .nav-css das folgende Element des Kontrollkästchens, also müssen Sie das ~ verwenden.

+0

dies richtige Antwort – Medda86

+0

Ah verdammt ein Idiot im, danke! –

2

Sie möchten den Selektor + oder ~ verwenden. Der Selektor + wählt das benachbarte Geschwister aus, während der Selektor ~ alle gleichgeordneten Elemente auswählt. In diesem Fall spielt es keine Rolle, welchen Sie wählen.

#toggleMenuToggle:checked + .nav-css { 
    display: none; 
} 

Für eine schöne Erklärung der Wähler sehen https://stackoverflow.com/a/26282459/6430127

+0

Danke! Ich bin ein Idiot, dass ich das nicht gesehen habe! –

0

Das Problem mit Ihrem CSS ist, dass .nav-css kein Kind von #toggleMenuToggle ist.

Versuchen Sie Folgendes:

#toggleMenuToggle:checked ~ .nav-css { 
    display: block 
} 

Die ~ Wählt jedes .nav-css Element, das

von einem #toggleMenuToggle Element vorangestellt werden
Verwandte Themen