Ansicht:   

#394130

Karsten Meyer zur Homepage von Karsten Meyer

Konstanz am Bodensee,
10.03.2016, 12:35:29
(editiert von Karsten Meyer, 10.03.2016, 12:43:02)

Aus- und Einklappen - wie geht's? (ed) (web.coding)

Hallo zusammen,

ich wüsste gern, wie das bei der mobilen Anicht von Wikipedia mit dem Aus- und Einklappen der Haupt-Abschnitte gelöst ist. Als ziemlich beliebiges Beispiel sei die Seite Haushaltssaldo genannt.

Wobei ich da übrigens einen Unterschied sehe: Auf dem PC sind nach dem Laden der Seite alle Abschnitte offen, auf dem Smartphone sind erstmal alle Abschnitte geschlossen.

Ich wäre glücklich über Tipps
- entweder, wie konkret das da gemacht ist oder
- wie man das am besten analysieren kann.
Mir ist aber klar, dass Wikipedia eine ziemliche Code-Hölle ist.

Besten Dank!
-Karsten

--
Ich bin sehr aktiv bei facebook, wo ich vor allem Fotos zeige und mich in Gruppen über alles mögliche, insbesondere meine Heimatstadt Konstanz austausche.

#394132

MudGuard zur Homepage von MudGuard

München,
10.03.2016, 14:00:20

@ Karsten Meyer

Aus- und Einklappen - wie geht's?

> ich wüsste gern, wie das bei der mobilen Anicht von Wikipedia mit dem Aus-
> und Einklappen der Haupt-Abschnitte gelöst ist. Als ziemlich beliebiges
> Beispiel sei die Seite
> Haushaltssaldo
> genannt.

per Javascript wird der Überschrift die Klasse open-block hinzugefügt bzw. weggenommen.

Sieht man, wenn man im Firefox mit Firebug das Element analysiert und es auf/zuklappt.

Das gleiche gilt für das div, das den zugehörigen Inhalt enthält.

Im CSS steht dann im Wesentlichen:

.collapsible-block { display: none; }
.collapsible-block .open-block { display: block; }

.collapsible-heading { /* zeige Aufklapp-Pfeilchen */
.collapsible-heading .open-block { /* zeige Zuklapp-Pfeilchen */ }

Das Javascript sucht vermutlich in der Seite nach Elementen mit class collapsible-block bzw. collapsible-heading und hängt daran dann die entsprechenden javascript-Eventhandler

--
[image]
MudGuard
O-o-ostern

#394133

Karsten Meyer zur Homepage von Karsten Meyer

Konstanz am Bodensee,
10.03.2016, 14:50:54

@ MudGuard

Aus- und Einklappen - wie geht's?

> > ich wüsste gern, wie das bei der mobilen Anicht von Wikipedia mit dem Aus-
> > und Einklappen der Haupt-Abschnitte gelöst ist. Als ziemlich beliebiges
> > Beispiel sei die Seite
> > Haushaltssaldo genannt.
>
> per Javascript wird der Überschrift die Klasse open-block hinzugefügt bzw.
> weggenommen.
>
> Sieht man, wenn man im Firefox mit Firebug das Element analysiert und es
> auf/zuklappt.

Ah ja, das kann ich jetzt mit dem Firebug sogar nachvollziehen.
Und das CSS hab ich kapiert.

> Das Javascript sucht vermutlich in der Seite nach Elementen mit class
> collapsible-block bzw. collapsible-heading und hängt daran dann die
> entsprechenden javascript-Eventhandler

Kann man das auch irgendwie aufspüren bzw. eingrenzen?

Schönen Dank, MudGuard!

--
Ich bin sehr aktiv bei facebook, wo ich vor allem Fotos zeige und mich in Gruppen über alles mögliche, insbesondere meine Heimatstadt Konstanz austausche.

#394136

Karsten Meyer zur Homepage von Karsten Meyer

Konstanz am Bodensee,
10.03.2016, 15:44:44

@ Karsten Meyer

Aus- und Einklappen - wie geht's? - Die JS-Seite

Habe jetzt hier ein sehr einfaches Beispiel für diese Funktionalität gefunden.

Der Haken daran ist, dass man jeder Frage und jeder Antwort eine ID zuweisen muss. Das ist natürlich eine üble Einschränkung, so lange das nicht automatisiert passiert.

2 Fragen daher:
a) Wäre es denkbar, dass ein JS das Zuweisen von IDs nach dem Laden der Seite erledigt?
Also dass z.B. alle Elemente der class="unsichtbar" eine durchnummerierte ID zugewiesen bekommen? Und auch in den Fragen müsste die ID ja eingetragen werden. Hmm, hmm, kann ein JS JS ändern?

oder

b) wäre es denkbar, dass das onclick-JS nicht eine ID anspricht, sondern "einfach" das nachfolgende DIV, z.B. das nächste DIV mit class="unsichtbar"?
Das wäre doch genial und in vielen Fällen zielführend!

Gruß Karsten

--
Ich bin sehr aktiv bei facebook, wo ich vor allem Fotos zeige und mich in Gruppen über alles mögliche, insbesondere meine Heimatstadt Konstanz austausche.

#394143

Jeff Clay

Syria Planum,
10.03.2016, 17:46:34

@ Karsten Meyer

Aus- und Einklappen - wie geht's? - Die JS-Seite

mittels jquery und listen arbeitet diese beispiel. im text seh ich da nur die closed class.

https://blog.kulturbanause.de/2011/11/elemente-mit-jquery-auf-und-zufahren-lassen-slide-toggle-und-parallel-das-icon-austauschen/

--
gruß Jeff Clay

[14.07.2011-11:12] balu_baer: du warst mal wieder viel klüger, als ich  :-D (Dieser Satz ist nicht für die öffentliche Verwendung freigegeben!)

#394152

Karsten Meyer zur Homepage von Karsten Meyer

Konstanz am Bodensee,
10.03.2016, 22:15:51

@ Jeff Clay

Aus- und Einklappen - wie geht's? - jQuery

> mittels jquery und listen arbeitet diese beispiel. im text seh ich da nur
> die closed class.
>
> https://blog.kulturbanause.de/2011/11/elemente-mit-jquery-auf-und-zufahren-lassen-slide-toggle-und-parallel-das-icon-austauschen/

Hallo JeffClay,
ich hatte eigentlich gehofft, ohne Monster-Bibliothek auszukommen aber das löst das Problem ganz wunderbar. Im HTML braucht es keine IDs mit Zählern - und das ist das, was ich suchte.

Bebenbei: Ich konnte noch nicht ausfindig machen, wie groß jQuery eigentlich ist. Und sehr merkwürdig: Geladen wird in dem Beispiel:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
aber in Wikipedia-Artikel über jQuery steht kein Wort von Google. Kannst du dir/mir das erklären?

Schönen Gruß
Karsten

--
Ich bin sehr aktiv bei facebook, wo ich vor allem Fotos zeige und mich in Gruppen über alles mögliche, insbesondere meine Heimatstadt Konstanz austausche.

Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz