jQuery Selector
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstrakten begriffs
allegorie
bildhaft belebte darstellung
bug
code
display
dom
element
funktion
gedanke
gerechtigkeit
gucken
justitia
lage
not
nutzen
schnelle hilfe
target
text
url
-
Hey Leute ich bräuchte mal eure Hilfe.
Ich hab mich mal ein bisschen mit jQuery beschäftigt.
Jetzt möchte ich mit einem Klick auf Elemente der Klasse "hstil" die Elemente der nächsten Klasse "bstil" aufdecken.
<script> $(document).ready(function(){ $(".hstil").click(function(){ $().toggle(1000); }); }); </script> <p class = "hstil">ALLEGORIE</p> <div class = "bstil"> <p>bildhaft belebte Darstellung eines abstrakten Begriffs oder Gedankens</p> <p>Justitia - Gerechtigkeit</p>
Gibts da einen passenden Selector? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
@leichtlatein
Probier es mal damit (siehe code unten).
Generell könnte man sowas aber auch ohne jQuery basteln, in pure JavaScript...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Toggle Elemente AUFKLAPPEN/ZUKLAPPEN (jquery/1.7.0)</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> </head> <body> <br> <p class="hstil">ALLEGORIE-1</p> <div class="bstil"> <p>bildhaft belebte Darstellung eines abstrakten Begriffs oder Gedankens</p> <p>Justitia - Gerechtigkeit</p> </div> <br> <p class="hstil">ALLEGORIE-2</p> <div class="bstil"> <p>bildhaft belebte Darstellung eines abstrakten Begriffs oder Gedankens</p> <p>Justitia - Gerechtigkeit</p> </div> <br> <p class="hstil">ALLEGORIE-3</p> <div class="bstil"> <p>bildhaft belebte Darstellung eines abstrakten Begriffs oder Gedankens</p> <p>Justitia - Gerechtigkeit</p> </div> <script type="text/javascript"> $(document).ready(function () { $('.hstil').click(function () { $(this).next('.bstil').slideToggle('fast'); }); $('.bstil').hide(); /* SetDefault: Anzeige startet mit display='none' für Elemente der class='bstil'...Alternativ set Default "display: none;" via inline-style oder stylesheet */ }); </script> </body> </html> -
lumix schrieb:
$('.bstil').hide(); /* SetDefault: Anzeige startet mit display='none' für Elemente der class='bstil'...Alternativ set Default "display: none;" via inline-style oder stylesheet */
So wie Du hier den Default setzt, ist es der richtige Weg! Für User ohne JS bleiben so alle Bereiche lesbar.
Wenn per Stylesheet auf "display:none;" gesetzt würde, gucken diese User in die Röhre. -
Thats not a bug, its an optional feature
So gut wie immer , wie Du auch sagst, ist es richtig wenn wenigstens der ZusatzAufklappText zu sehen ist
falls mal JS deaktiviert ist oder wg. eines anderen JS-Fehlers(oder auch HTML-DOM Struktur korrupt)
der Klappmechanismus ausser Funktion ist.
Möchte man aber aus einem exotischen Gesamt-Anforderungs-Kontext heraus
lieber die Not-Alternative "Default-Style: display: none;" implementieren,
dann bekäme man dadurch eben den exotischen Wunsch erfüllt
das bei defekten Aufklappmechanismus keine Zusatztexte angezeigt werden (for ever).
Also für die extrem exotischen AnwendungsFälle von "lieber nie überflüssige Zusätze" als "immer alles im vollem Umfang".
Aber trotzdem, vielen Dank für die Bestätigung, das ich damal instinktiv/zufällig den richtigen Weg gewählt habe,
indem ich es an Ort und Stelle im JS untergebracht habe und keinen Mix eingegangen bin.
Das ist dann scheinbar pauschal richtig so und der (Exoten)Alternativ-Comment ist dann wohl eher irreführend gewesen;)
Schönen Abend noch -
lumix schrieb:
Thats not a bug, its an optional feature
Es sollte Standard sein und nicht Feature und nicht optional.Manchmal ist JS nicht deaktiviert, sondern einfach nicht vorhanden.
Grund: Neben der Usability, die Barrierefreiheit. Ältere Screenreader beherrschen zwar CSS (würden bei 2. Methode die Texte also ignorieren) aber kein Javascript. Jemand, der auf ein derartiges Tool angewiesen ist, wäre, wenn die Texte per Default versteckt sind, nicht in der Lage, diese Infos zu lesen.
Gleiches gilt auch, wenn z.B. Links nicht per HTML funktionieren, sondern mittels onclick realisiert werden.
Viele Suchmaschinen-Bots sind auch nicht in der Lage JS zu nutzen. Für die wären dieser Content und diese Links dann schlichtweg nicht vorhanden.
-
Ok vielen Dank, funktioniert perfekt.
Eigentlich wollte ich mit css die Aufklappinhalte verstecken,
aber was ihr da sagt macht auf jeden Fall Sinn.
Vielen Dank für die schnelle Hilfe. -
@leichtlatein
Wenn du jQuery nicht noch für andere Funktionen nutzt, kannst du das einfacher/besser mit der CSS-Pseudoklasse target umsetzen. Beispiele sind z.B. hier zu finden http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
