Checkbox-Trick funktioniert nicht

Ich möchte den Checkbox-Trick verwenden, um meine mobile Navbar zu zeigen. Irgendwie wird die h1 nicht angezeigt, auch wenn das Kontrollkästchen nicht aktiviert ist. Was habe ich falsch gemacht?Checkbox-Trick funktioniert nicht

#label { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #000000; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
    width: 47px; 
 
} 
 

 

 
h1 { 
 
display: none 
 
} 
 
#toggle { 
 
    display: none; 
 
} 
 

 

 
#toggle:checked + h1 { 
 
\t \t display: block; 
 
}

<div id="hamburgermenu"> 
 
    <label id="label" for="toggle">&#9776;</label> 
 
    <input id="toggle" type="checkbox"> 
 
</div> 
 

 
<h1>DEMO ELEMENT</h1>

Quelle

2017-12-23 Noah Adler

Kann nicht angezeigt werden: Wenn ein Element unsichtbar ist, sind ALLE Nachkommen ebenfalls unsichtbar. Ihr h1 ist ein untergeordnetes Element Ihres (unsichtbaren) Kontrollkästchens. Obwohl es selbst als Block angezeigt wird, ist der gesamte Container (das Kontrollkästchen) überhaupt nicht sichtbar. Auch dies ist kein gültiger HTML-Code, ein Kontrollkästchen darf keine anderen untergeordneten Elemente enthalten. – Psi

@Psi Wie, siehst du die h1 ein Kind der Checkbox sein? Geben Sie keine irreführenden Informationen an, der Grund ist der CSS-Selektor, der hier verwendet wird. –

Verwenden Sie JavaScript für diese '.checked' ist' boolean' nach dem Anhören hören 'change' statt' click'. –

Du "+" verwendet, die ein sibling CSS selector, aber <h1> ist kein Geschwister Ihrer Checkbox. Es ist ein Geschwister des übergeordneten Containers der Checkbox. Sie können 3 Möglichkeiten haben, darüber zu gehen.

Erster Weg: es die Geschwister des Eingangs machen, indem es innerhalb

#label { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #000000; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
    width: 47px; 
 
} 
 

 
h1 { 
 
    display: none 
 
} 
 

 
#toggle { 
 
    display: none; 
 
} 
 

 
#toggle:checked+h1 { 
 
    display: block; 
 
}

<div id="hamburgermenu"> 
 
<label id="label" for="toggle">&#9776;</label> 
 
<input id="toggle" type="checkbox"> 
 

 
<h1>DEMO ELEMENT</h1> 
 
</div>

Zweiter Weg Abdrucken: es die Geschwister des Eingangs Stellen durch die Eingabe herauszunehmen des Behälters

#label { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #000000; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
    width: 47px; 
 
} 
 

 
h1 { 
 
    display: none 
 
} 
 

 
#toggle { 
 
    display: none; 
 
} 
 

 
#toggle:checked + h1 { 
 
    display: block; 
 
}

<div id="hamburgermenu"> 
 
<label id="label" for="toggle">&#9776;</label> 
 
</div> 
 
<input id="toggle" type="checkbox"> 
 
<h1>DEMO ELEMENT</h1>

Dritter Weg: Nutzen Sie Javascript.

Quelle

2017-12-23 21:57:31

Nur das Kontrollkästchen muss außerhalb des div verschoben werden. Das Etikett kann innen bleiben. –

@ René Oh, das ist witzig :) –

Checkbox-Trick funktioniert nicht

Antwort

Verwandte Themen