Ok, ich habe eine Reihe von Kontrollkästchen zum Auswählen von Kriterien. Um dem Argument willen sagen wir, dass die Daten so aussehen:
%Vor%Die [] s stellen Kontrollkästchen dar.
Die offensichtlich erfundene Natur dieses Beispiels ignorierend, ist die Idee das:
Nun ist dies relativ einfach einzurichten, indem onclick das CSS-Attribut display zwischen block und none umschaltet.
Dies ist derzeit auf der Seite wie folgt strukturiert:
%Vor%Ich sollte darauf hinweisen, bevor jemand fragt: Der Grund, warum das Kontrollkästchen in die Tabellenzelle eingefügt wurde, war, die Formatierung zu steuern. Es machte es leicht, effektiv einzurücken, da sich alles in der nächsten Tabellenzelle anordnen würde.
Es funktioniert alles gut, aber die Tabellenverschachtelung wird ziemlich tief. Ich denke immer, dass es einen besseren Weg geben muss. Es muss in der Lage sein, leicht dynamisch zu bauen und eine gute browserübergreifende Unterstützung für die Formatierung des "Baums" zu haben.
Ich sollte auch erwähnen, dass jQuery verfügbar ist. Ich benutze es für andere Dinge.
Vorschläge?
Bearbeiten: Ja, das Ankreuzen des Kontrollkästchens ist wichtig, da einige Kommentare beachtet wurden. Außerdem habe ich eine Lösung dafür, basierend auf den Antworten, die ich bekommen habe, als Antwort unten gepostet (zu groß, um sie hier hinzuzufügen), nur für diejenigen, die neugierig sind, ein Beispiel zu sehen.
Edit: ein kleines css & amp; js zu zeigen & amp; Verschachtelte Elemente ausblenden (keine Kontrollkästchen)
%Vor%und js ...
%Vor%Bearbeiten Sie erneut, weil Sparr einige bessere Stile möchte (vorausgesetzt, die Kontrollkästchen haben einen Stil von "Checkbox"
%Vor%Sie könnten dies tun:
%Vor%Sie würden dann den Padding / Rand der UL's auf 0 und 0 setzen. Dann setzen Sie das Padding-links der LI's auf 10px.
%Vor%Fügen Sie für das JavaScript an jedes Kontrollkästchen ein Ereignis an, das bestimmt, ob die Geschwister-UL (falls vorhanden) sichtbar sein sollte. Wenn das Kontrollkästchen aktiviert ist, zeige es an, andernfalls verberge es.
Willst du eine tiefe jQuery Magie sehen?
%Vor%Hinweis: Die einzige Dekoration hier ist die Baumklasse.
%Vor%und die Magie:
%Vor%Damit wird das ganze Ding zu einem funktionierenden Öffnungs- und Schließbaum, wenn Sie auf die Kontrollkästchen klicken. Super.
Danke an davethegr8, Jonathon Sampson und andere um Rat.
Ich muss vorschlagen, dass Sie zusätzlich zu den obigen Vorschlägen das JavaScript aus Ihrem Markup extrahieren. Mit einer Bibliothek wie lowpro (einer von meinen Favoriten) können Sie ein Objekt erstellen, um das Verhalten Ihrer verschachtelten Checkbox zu behandeln, und es unauffällig automatisch anwenden lassen. Wenn Sie Ihren Code so einpacken, wird Ihr Markup einfacher zu pflegen und Ihr Code einfacher und schneller zu schreiben, leistungsfähiger und einfacher zu verwalten.
Tabellen sind für tabellarische Daten. Verwenden Sie stattdessen verschachtelte Listen und CSS zum Formatieren.
Wenn Sie nach einer vollständigen Lösung suchen, verwenden Sie hier reines CSS für moderne Browser und JavaScript für IE:
%Vor% Angenommen, ein Kontrollkästchen ist nicht breiter als 20px .
Während das jQuery-Plugin mcDropdown das verschachtelte Listenproblem auf eine andere Weise anspricht (keine Kontrollkästchen), könnte es sein für Ihre Bedürfnisse geeignet sein.
Ich weiß, dass das nicht viel mit der Frage zu tun hat, also ist die Abstimmung nicht einfach nur eine Suggestion.
In diesem Beispiel von davethegr8:
%Vor%Wenn Sie jedem Schritt eine Klasse zuweisen, können Sie mit jQuery einige coole Drop-down-Effekte mit einem Klick erstellen:
Wie
%Vor%Nur eine kleine Suggestion allerdings:)
Wenn die Breite der Kontrollkästchen immer noch ein Problem ist (nach allen vorherigen Antworten ...), können Sie entweder:
Die vorgeschlagene geschachtelte Listenstruktur wird offensichtlich verwendet.
Tags und Links javascript html jquery css cross-browser