Liste ein/ausblenden nach Checkbox

[samtux]

Hi!
Ich habe auf meiner Seite eine Checkbox mit einer ID und eine <ul>-Liste mit einer ID.
Nun möchte ich, dass wenn die Checkbox aktiviert ist, die Liste sichtbar ist und wenn die Checkbox deaktiviert ist, dass die Liste unsichtbar ist.

Also Checkbox aktiviert:
#liste {display:block;}
Checkbox deaktiviert:
#liste {display:none}

Ich hatte ja gedacht, dass das so funktionieren sollte:

#liste {display:none;}  
#checkbox:checked #liste {display:block;}

Aber bei einem Klick auf die Checkbox tut sich nichts.

Mit Javascript kann ich es nicht umsetzen, da die Funktion nur bei einer bestimmten Bildschirmgröße benötigt wird. Bei größeren Größen, soll die Liste immer sichtbar sein.
Es soll aber auch möglich sein, das Browserfenster zu skalieren wodurch sich die gesamte Seite anpasst.

[Kai]

Hola,

spiel damit herum...

<style>  
#liste:target {  
  background-color: Gold;  
}  
#liste {  
 width: 50px;  
 height: 50px;  
 padding: 10px;  
 display: none;  
}  
input[type=checkbox]:checked + #liste {  
 display: block;  
}  
</style>

<div>  
  <input type="checkbox" value="1" id="checker1">  
  <div id="liste"></div>  
</div>

gruss kai

[Kai]

das geht auch

<style>  
#checker1:checked + #liste {  
  background-color: Gold;  
  width: 50px;  
  height: 50px;  
  display: block;  
}  
</style>

[Gunnar Bittersmann]

@@samtux:

nuqneH

Ich hatte ja gedacht, dass das so funktionieren sollte:

#liste {display:none;}

#checkbox:checked #liste {display:block;}

  
` ` ist der [Kombinator für Nachfahren](http://www.w3.org/TR/css3-selectors/#descendant-combinators). Der würde greifen, wenn #liste als Nachfahrenelement in #checkbox enthalten wäre. Da input leere Elemente sind, kann das gar nicht sein.  
  
Du benötigst den [Kombinator für Geschwisterelemente](http://www.w3.org/TR/css3-selectors/#sibling-combinators) `+` bzw. `~`. Wenn #liste und #checkbox denn tatsächlich Geschwister sind.  
  
Das Dumme daran ist: der [WebKit Adjacent/General Sibling & Pseudo Class Bug](http://forum.de.selfhtml.org/archiv/2013/8/t214562/#m1468261) im Android-Browser …  
  

> Aber bei einem Klick auf die Checkbox tut sich nichts.  
  
… was in fehlerhaften Android-Browser auch bei korrektem CSS der Fall ist.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[samtux]

Also im mobilen Chrome läuft es jetzt. Im nativen Browser nur mit dem Bugfix.
Ist der Bugfix für den produktiven Einsatz auf einer Website geeignet? Oder ist die CPU-Last zu groß? Bei mir habe ich keine erhöhte Beanspruchung der CPU bemerkt (Android 4.3)