jQuery: Aufklappen des Contents nach Klick auf Menülink

[tombe]

$(document).ready(function(){

$("a.link").bind("click", function(e){
	e.preventDefault();
    href = $(this).attr("href");
    $(".result").fadeOut("slow", function (){
        $(".result").load(href, function () {
			$(".result").prepend("<span class='x'><b>X</b></span>");
		});
        $(".result").fadeIn("slow");
    });
});

$("body").on("click", ".x", function () {
	$(".result").fadeOut("slow");
});

});

Damit wird zusätzlich zum eigentlichen Inhalt noch ein "X" in die result-Box geladen. Wenn man auf das X klickt, wird die Box wieder ausgeblendet.

 

[yuro]

danke dir tombe. funktioniert perfekt.

Eine Frage nur.. Kann man das nicht auch mit der Funktion removeClass(); machen? oder wofür dient sie genau?

Das prepend() dient nur dazu das der button X vor dem eigentlichen Inhalt steht ne? Man hätte auch wenn es jetzt nicht wichtig ist wo das X stehen soll auch append(); nehmen können oder?

 

[tombe]

Die Funktion "load" lädt den kompletten Inhalt der Box neu. Sprich alles was vorher enthalten war ist weg bzw. wird mit dem neuen Inhalt überschrieben

"prepend" ist wie du richtig geschrieben hast dazu da, denn hierbei angegebenen Code als erstes in dem Container zu platzieren. Mit "append" dagegen würde es ganz am Ende stehen.

Mit "removeClass" entfernst du die Klasse, das stimmt auch.
Du müsstest dann aber a) eine andere Klasse dafür aufnehmen und b) würde die Box dann einfach schlagartig verschwinden, so wird sie ausgeblendet.

 

[yuro]

Ahhh ok verstehe. Und dann hätte ich noch eine letzte Frage. Muss das "preventDefault()" immer mit dabei sein? Wenn nicht, wann weiss ich wann ich es einsetzen muss?

Achja zu einem CSS-Teil wollt ich auch noch was wissen und zwar klappt meine Navigation einwandfrei mit dem hovern usw. Ich will das wenn du z.b. auf Kontakt klickst und sich der content öffnet soll oben in der Navigation der Menüpunkt Kontakt aktiv sein also das man sieht auf welcher seite man sich befindet, sodass der Hoverzustand bleibt.

Ich dachte immer das funktioniert mit z.B. #menu li:active aber das ging irgendwie nicht.

 

[tombe]

Hier steht es (auf englisch) schön beschrieben wann man "event.preventDefault" benötigt und wann nicht:

The event.preventDefault() method stops the default action of an element from happening.

For example:

• Prevent a submit button from submitting a form
• Prevent a link from following the URL

Also immer dann wenn das Ereignis das normalerweise ausgeführt wird nicht eintreten soll, musst du diese Anweisung verwenden!

Um den Link "aktiv" zum machen, benötigst du folgende 2 Zeilen:

$(".link").removeClass("active");
$(this).addClass("active");

und natürlich die entsprechende CSS Klasse "active".

Hiermit wird zuerst der zuletzt aktive Link wieder auf "normal" gesetzt indem die Klasse gelöscht wird. Dann wird dem Link der angeklickt wurde diese Klasse zugewiesen.

 

[Jan-Frederik Stieler]

Hi,
wann nimmt man welche der drei Varianten

$("a.link").bind('click', function(e){

und

$('.filter-table a').click(function(e){

und

$('.filter-table a').on('click, 'function(e){

Bei dieser Variante des Scriptes

$(function(){
	$('.filter-table a').click(function(ajaxClick){
		ajaxClick.preventDefault();
		var contentToLoad = $(this).attr('href');
	
		$(".ajaxContent").slideDown('8000', function(){
			$(this).load(contentToLoad, function(){
				$('.ajaxContent').prepend('<button class="btn icon-remove pull-right"></button>');
			});
		});
		$(this).addClass('active');
	});
	
	$('body').on('click', '.icon-remove', function () {
		$('.ajaxContent').children().toggle('slow', function(){
			$(this).slideUp('slow');
		});
	});
});

wird .load() doch erst als Callback der slideDown Klasse geladen.
Der Slide sollte sich ja mit 8000 auch extremst langsam öffnen, macht er aber nicht.
Warum sieht das immer noch so aus als gäbe es keinen Slide?


Grüße