JQuery oder JavaScript: Inhaltsverzeichnis erstellen

[Linus_for_you]

ok, das muss ich um es zu verstehen mal eben auseinandernehmen...
also ich definiere als "items" das element 'li'. Damit erfasse ich also alle li-elemente auf der seite, richtig?
und mit heading das gleiche mit den H1

wenn ich jetzt also auf ein li klicke, dann wird eine funktion aufgerufen. diese funktion speichert zu erst das element auf das ich geklickt hab in eine variable i und ordnet dem dann, die entsprechende h1 zu. und dann soll das window zu der headline "h" scrollen. richtig?

also ich habs jetzt in die datei ganz unten eingebaut, aber ein klick bewirkt leider nicht, dass ich scrolle. kann das daran liegen, dass ich einen besseren selector nehmen sollte für "items"?

 

[CPoly]

wenn ich jetzt also auf ein li klicke, dann wird eine funktion aufgerufen. diese funktion speichert zu erst das element auf das ich geklickt hab in eine variable i und ordnet dem dann, die entsprechende h1 zu. und dann soll das window zu der headline "h" scrollen. richtig?

Nicht ganz. Wenn du auf ein li klickst, hole ich mir mittels "index" den Index des geklickten Elements unter allen anderen. Und dann hohle ich mir die Überschrift, die unter allen Überschriften eben diesen Index hat. Ich nutze einfach die Tatsache aus, dass es zu jeder Überschrift genau einen Inhaltsverzeichniseintrag gibt und das in der gleichen Reihenfolge (Die Elemente liegen in den jQuery Objekten in der Reihenfolge wie im Dokument).


Wie genau hast du es eingebaut? Das muss mit in die ready-Funktion.

//Das ist identisch zu $(document).ready(function() {
$(function() {
    var toc = {};
		
    walk( toc , $('body') );
	
    var lists = output( toc , '' );
		
    $('body').prepend(lists);

    //HIER HIN
});

 

[Linus_for_you]

//Das ist identisch zu $(document).ready(function() {
$(function() {

achsoooooooooo, ok alles klar.. jetzt gehts auch!
Super Geil!! Hammer!!

ok, jetzt noch das zusammen klappen..
also im Initialzustand, sollen alle Überschriften zusammen geklappt sein und man soll nur die Überschriften erster Ordnung sehen.
ich hab mir eine Grafik geladen (ein kleines "+") und es soll jetzt so sein, dass wenn ich auf das "+"-Klicke, dass dann die entsprechend nächste Überschriftenordnung ausklappt.

bsp:

+1. Titel
+2. Programm

klick auf das + bei 2:

+1. Titel
+2. Programm
   +2.1 Foo
   +2.2 Bar

und so weiter

hat eine Überschrift keine "Kinder" soll auch das "+" nicht angezeigt werden.

wie stelle ich dass, dann an?

 

[CPoly]

Ich nehme an, es geht nur um das Inhaltsverzeichnis?


Zuerst müssen wir an dem vorherigen Code noch was ändern, da ist was falsch (und nicht valide).

function output( toc , numbering ) {
		var list = '';
		var counter = 1;
		
		for(var k in toc) {
			if(toc.hasOwnProperty(k)) {
				list += '<li>' + getNumbering(numbering, counter) + ' ' + k;
				
				list += output( toc[k] , getNumbering(numbering, counter) );
				
				list += '</li>';
				
				counter++;
			}
		}
		
		if(list.length) {
			return '<ol style="list-style-type:none;">' + list + '</ol>';
		} else {
			return '';
		}
	}

Vorher waren die "ol" nicht in den "li", sondern auf der gleichen Ebene.


Und jetzt zum ein/ausklappen (hinter den Code zum Scrollen).

//"+" icon hinzufügen
items.filter(':has(ol)').prepend('<span class="expand" style="float:left;display:block;">+</span>');

//Alle "+" icons
var expands = $('.expand');

//Alles außer der ersten Ebene verstecken
items.find('> ol').hide();

expands.click(function(e) {
	e.stopPropagation();
	
	$('> ol', this.parentNode).slideToggle();
});

 

[Linus_for_you]

klasse... super...

aber jetzt klappt das Scrollen auf den unteren ebenen nicht mehr..
kann es sein, das das daran liegt, dass dort jetzt ein <ol> drum ist?

 

[CPoly]

Es hing damit zusammen. Jetzt wurden beim Klick auf einen tieferen Punkt auch die klick-Events der Eltern ausgelöst (http://en.wikipedia.org/wiki/DOM_events#Event_flow).

Eine Zeile behebt das

items.click(function(e) {
	e.stopPropagation();/*neu*/
	
	var i = items.index( this );
	var h = heading.eq( i );
	
	$(window).scrollTop( h.offset().top );
});

 

[Linus_for_you]

das mit dem Event Flow, leuchtet mir ein.

super klasse.. es läuft!
Prima.. bin voll happy! Danke schööön!

so, eine aller letzte kleinigkeit noch:
Wie kann ich es nun anstellen, dass
1. die Überschriften 1. Ordnung fett gedruckt werden
2. das "+" nach einem klick zu einem "-" wird und umgekehrt?

 

[CPoly]

1. Dafür wäre es sinnvoll, das Inhaltsverzeichnis in einen weiteren Kasten zu stecken. Dann kannst du einfach $('#kasten > ol > li'); machen und hast nur die obere Ebene.

2. Im Klick-Handler zeigt "this" auf das Element. Mittels text() kannst du den Inhalt ändern. Und mittels foo.is(':visible') prüfen, ob die Ebene darunter gerade sichtbar ist, oder nicht.