nicht angemeldet
Hallo allerseits,
ich bin gerade dabei, meine Seite für iPhones zu optimieren. Da es keine Hover Effekte in dem Sinne gibt, bin ich teils auf Javascript angewiesen um meine Dropdownlisten zu verwirklichen.
Ich habe eine Selectliste die nur zum Schein existiert bzw. zur Anzeige, da ich eigentlich aus Platzgründen in der Liste Inputfelder brauche. Das geht aber ja nicht, daher ist sie von Anfang an auf "disabled" gestellt. Via CSS active Effekt öffnet sich beim klicken eine Box, die über die Selectliste geschoben wird und ich mir im Prinzip eine "Option"-liste selbst gebastelt habe.
Das funktioniert auch in allen gängigen Browsern. Allerdings bleibt die Liste auch nur durch den anschließenden hover-Effekt geöffnet, den habe ich beim Handy ja nicht.
Im Prinzip sieht das so aus:
<ul class='DropDown'><li><select name='NurSoDa' disabled><option>Alle Kategorien</option></select>
<ul class='Box'>
<li>Punkt eins mit Inputfeld</li>
<li>Punkt zwei mit Inputfeld</li>
</ul>
</li>
</ul>
Nun ist mein Versuch folgender: Beim anklicken des DropDown wird der Box eine extra Klasse angehangen um sie offen zu halten. Ob ich nur die Selectliste anklicke oder nicht ist wegen dem Bubbling egal.
class='Box Offen'
Das funktioniert im IE und Opera problemlos. Mir macht aber jetzt der Firefox zu schaffen, denn die deaktivierte Selectliste ist vom Bubbling nicht betroffen. Auch dann nicht, wenn ich explizit einen Eventhandler auf die Selectliste lege. Ist die Selectliste aber aktiviert (<select name='NurSoDa'>), dann funktioniert es wieder problemlos.
Weiß jemand einen Workaround, um das Problem zu lösen? Via Google konnte ich nichts brauchbares finden.
Danke!
mfg,
Torsten