Wie man vorgeht: Geprüfte Arbeit am Android Browser?

Question

Ich versuche ein Formular zu erstellen, das eine Liste von Standardoptionen enthält und das auch erweitert werden kann, um einige EXTA-Optionen anzuzeigen. Ich tue dies mit dem folgenden CSS-Code:

.myForm .moreOpts {display:none;} 
.myForm #more:checked +*+ .moreOpts {display:block;} 

mit folgendem HTML:

<form action="#" class="myForm"> 
    <ul> 
    <li> 
     <input type="checkbox" id="pref-1" name="pref-1" value="1"> 
     <label for="pref-1">Foo</label> 
    </li> 
    <li> 
     <input type="checkbox" id="pref-2" name="pref-2" value="2"> 
     <label for="pref-2">Bar</label> 
    </li> 
    <li> 
     <input type="checkbox" id="more" name="more" value="true"> 
     <label for="more">More options</label> 
     <ul class="moreOpts"> 
     <li> 
      <input type="checkbox" id="pref-3" name="pref-3" value="3"> 
      <label for="pref-3">Baz</label> 
     </li> 
     <li> 
      <input type="checkbox" id="pref-4" name="pref-4" value="3"> 
      <label for="pref-4">Qux</label> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</form> 

Demo

Dieser Code funktioniert perfekt in jedem Browser, mit Ausnahme von Android Browser und Dolphin. Ich habe an article gefunden, das this "Bugfix", aber das nur fixes my problem in Dolphin empfiehlt.

Gibt es eine Möglichkeit, dies auch für den Standard-Android-Browser funktionieren zu lassen?

Answer 1

Sie dies mit Hilfe des details Element erreichen eine große Sache ist. Android supports it seit Version 4. Allerdings müssen Sie mit IE und Firefox beschäftigen, aber fortunatly diese Browser unterstützen die CSS3 Pseudo-Staaten, einschließlich :checked.

Zwei verbinden diese beiden, verwenden Sie einfach das Kontrollkästchen hacken in Browsern, die details nicht unterstützen. Hier ist der Prozess in Code erklärt: http://jsfiddle.net/hF6JP/1/

EDIT: dies ist die endgültige Lösung, in der Zusammenfassung setzt Etikett löst das Problem der erzwungenen Checkbox mit den Optionen wechseln: http://jsfiddle.net/mYdsT/

Answer 2

Ich würde :checked für alle Browser nicht vertrauen. Ich würde das Ereignis click von #more erfassen und einfach eine Klasse zum übergeordneten Element hinzufügen. Es ist einfach mit jQuery. Diese Option funktioniert in Android und IE8.

$("#more").on("click", toggleCheckboxes); 
var toggleCheckboxes = function(evt){ 
    var $this = $(this); 
    $this.parents("li").toggleClass("show-more-options"); 
    evt.preventDefault() 
} 



.myForm .moreOpts { 
    display:none; 
} 
.myForm .show-more-options .moreOpts { 
    display:block; 
} 

:checked nicht in IE8 unterstützt, die leider immer noch

kann

https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

Answer 3

http://quirksmode.org/css/selectors/mobile.html#t60

:checked funktioniert anscheinend in keiner Android-Version. Ich bin mir nicht sicher, warum so viele Webseiten berichten, dass es funktionieren sollte (anscheinend von 2.1 aufwärts), aber das ist falsch.

Das Schöne an QuirksMode ist, dass jedes Feature tatsächlich in einem echten Browser getestet wird, bevor es im Internet veröffentlicht wird.

JavaScript scheint die beste Lösung zu sein. Ich würde sogar Javascript empfehlen, denn wenn ein Benutzer das "mehr" Feld anschaut, dann wählt er einige der zusätzlichen Optionen aus und deaktiviert dann das "mehr" Feld ... die zusätzlichen Auswahlen werden immer noch "überprüft" und werden gesendet, wenn a Benutzer trifft einen "Senden" -Button. Sie müssen die Kontrollkästchen jedes Mal deaktivieren, wenn das Kontrollkästchen "Mehr" deaktiviert ist. Der einzige Weg, dies zu tun, ist mit Javascript.

UPDATE: Quirksmode hat einen fehlerhaften Test für den :checked Selektor geschrieben:

:checked { 
    display: inline-block; 
    width: 3em; 
} 

Sie werden feststellen, dass auf Android die Breite ändert mich nie ... aber dies ist aufgrund der Tatsache, dass Android nicht Wenden Sie eine Breite auf Checkboxen und Radios an (während Desktop-Browser dies tun).

Die folgende tut Arbeit, auch in meinem Android 2.3:

:checked { 
    display: inline-block; 
    margin: 3em; 
} 

So, wie es in anderen Kommentaren erwähnt, ist das Problem mit der Kombination des geprüften Selektor und dem benachbarten Geschwister-Selektor:

:checked + .test { /* does not work on android :(*/ } 
:checked ~ .test { /* does not work on android :(*/ }