jQuery: Aufklappen des Contents nach Klick auf Menülink

Y

yuro

Erfahrenes Mitglied
Hallo,

ich habe eine Frage zu einer jQuery Funktion.

Und zwar möchte ich, dass wenn ich auf einen Menüpunkt in der Navigation klicke, sich dann erst der Content öffnet im Sinne von slideDown() und wenn man auf denselben Menüpunkt wieder klickt soll der Content wieder nach oben zugehen im Sinne von slideUp().

Ich könnte es evtl mit slideToggle() machen, nur ist das Problem, dass wenn ich auf einen anderen Menüpunkt klicke, es nicht so funktioniert wie ich es möchte. Denn wenn man auf einen anderen Menüpunkt klickt soll der Content zugeklappt und der Content vom neuen Menüpunkt aufgeklappt werden.

Kann mir da einer einen Tipp geben, wie ich das realisieren könnte?

Ich danke jedem für seine Hilfe :)
 
Hej Jan,

Ich hab mir deinen Code mal angeschaut. Sieht sehr interessant aus. Nur weiss ich jetzt nicht genau wie ich das auf meine Listenelemente übertragen soll. Der Content soll ja per AJAX übertragen werden.


So sieht mein HTML Code aus:
Code: 
<nav id="header-nav">
        	<ul id="menu">
            	<li><a id="home" href="#">Home</a></li>
                <li><a id="bio" href="#">Biografie</a></li>
                <li><a id="referenzen" href="#">Referenzen</a></li>
                <li><a id="links" href="#">Links</a></li>
                <li><a id="kontakt" href="#">Kontakt</a></li>
            </ul>
        </nav>

<section>
        <div class="result">
        	//hier lädt die load()-Funktion den Content Inhalt ohne das die ganze Page neu lädt.
        </div>
    </section>

jQuery:
Code: 
    $("#home").click(function() {
        $(".result").load("index.html");
    });
	
    $("#bio").click(function() {
       	$(".result").load("bio.html");
    });

....

Ist der bisherige jQuery code bei dem Accordion dann überflüssig?
 
Zuletzt bearbeitet:
So wie du es hast, reicht das hier aus:

Javascript: 
$(".link").click(function() {
	var id = $(this).attr("id");
	$(".result").fadeOut("slow", function() {
		$(".result").load(id + ".html");
		$(".result").fadeIn("slow");
	})
});

Die ID des jeweiligen Links entspricht den Dateinamen, bzw. den Dateinamen ohne Endung.

Die einzelnen Click-Funktionen brauchst du dann natürlich nicht mehr!
 
Zuletzt bearbeitet:
Das mit dem href ist ein gutes Argument.

Javascript: 
$("a.link").bind("click", function(e){
	e.preventDefault();
	href = $(this).attr("href");
	$(".result").fadeOut("slow", function (){
		$(".result").load(href);
		$(".result").fadeIn("slow");
	});
});

Alle Links die es betrifft, bekommen die Klasse "link" zugewiesen.
 
Zuletzt bearbeitet:
@tombe: kennst du eine Möglichkeit das mit dem Slide beim ersten click zu verbessern?
Also das dort auch schon das so schön aufgeht und nicht einfach nur erscheint.

Grüße
 
Erst einmal einen riiiiiiiesen Dank an tombe und jan :). Das ist genau das was ich gesucht habe. Es funktioniert einwandfrei.

Hab da noch eine Frage zu einer Funktion. Und zwar klappt sich jetzt alles prima auf und zu. doch es soll auch die Möglichkeit geben, dass wenn erst einmal ein Menü aufgeklappt wurde, man es durch ein X schließen kann. Momentan ist nur der Anfang (sozusagen wenn man auf die Seite gelangt) die .result-box nicht zu sehen da ich sie mit einem {display:none;} versehen habe.

Ich weiss, dass ich mit der jQuery Funktion removeClass(); dies vollenden kann. Nur wie füge ich sie dem obigen Code hinzu?
 
@Jan: Ich denke es liegt an zwei Dingen das der Text beim ersten Mal so "plötzlich" erscheint.

1) Der Container "result" ist leer, füge einfach mal ein nbsp; und es wird schon besser.

2) Die Angabe "slow" ist nicht langsam genug. Wenn man anstatt "slow" z.B. den Wert 1000 macht, erscheint der Text auch beim ersten Mal nicht so plötzlich.

Wenn man nur ein Whitespache einfügt aber den Zeitwert nicht ändert oder auch umgekehrt, ändert sich nichts. Nur wenn beide Angaben geändert werden hilft es was.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück