jQuery: toggle div springt hoch

[stiller]

Hallo

Habe eine eine Auflistung von Titel und Bildern, klickt man auf einen Titel erscheint unterhalb des Bildes ein Textblock. Funktioniert soweit so gut, doch wenn ich in der Liste runterscrolle und dort klicke, springt die Seite immer wieder zum Anfang hoch. Wie kann ich das deaktivieren.

HTML:
<h3 id="x1h" class="xc"><a href="#" class="a" id="x1">Titel</a></h3><img...</img><div id="x1b">Text</div> etc etc.

jQuery:

  
$('.a').click(function() {  
		var titel = $(this).attr('id');  
		var besch = $(this).attr('id')+'b';  
		var head = $(this).attr('id')+'h';  
		$('#'+head).toggleClass("xc");  
		$('#'+besch).toggle();  
	});  

Danke für eure Hilfe.

Gruss
Stiller

[Matthias Apsel]

Om nah hoo pez nyeetz, stiller!

<h3 id="x1h" class="xc"><a href="#" class="a" id="x1">Titel</a></h3><img...</img><div id="x1b">Text</div> etc etc.

Informiere dich, was href="#" bewirkt. Verwende keine Links, wenn du nichts verlinken willst.

Matthias

[braini]

nicht getestet, sollte aber so klappen...

$('.a').click(function(event) {  
	event.preventDefault();  
	var titel = $(this).attr('id');  
	var besch = $(this).attr('id')+'b';  
	var head = $(this).attr('id')+'h';  
	$('#'+head).toggleClass("xc");  
	$('#'+besch).toggle();  
});

Infos zu jQuery preventDefault...

Gruss braini

[Matthias Apsel]

Om nah hoo pez nyeetz, braini!

Es sollte reichen, die Klasse des h3-Elements zu togglen, etwa class="open". Im CSS dann beispielsweise:

.info {  
  display: none;  
}  
  
.open ~ .info {  
  display: block;  
}

Wahrscheinlich ist es besser, das Elternelement der Überschrift, nach meinem Gefühl sollte es figure sein, bei Bedarf mit einer Klasse zu versehen. Dann passt natürlich das CSS nicht.

Genaueres lässt sich erst sagen, wenn man die Seite kennt, mit Sicherheit aber sind 3 IDs auf engstem Raum, die auch noch überhaupt nicht aussagekräftig sind, vollkommen überflüssig.

Matthias

[1UnitedPower]

Meine Herren,

nicht getestet, sollte aber so klappen...

Sollte tatsächlich funktionieren, ist aber kein guter Stil. Siehe Matthias' Antwort.

[Baba]

Irgendwie würde ich einfach das vorschlagen. Aber das sehe ich wohl verkehrt...?!?

<h3 class="xc"><a class="myclick">Titel</a></h3><img>...</img><div>Text</div>  

  

> $('a.myclick').click(function() { 		  
> 		$(this).parent().toggleClass("xc");  
> 		$(this).nearest('div').toggle();  
> 	});  
> 

(Hab mal rausgelöscht, was nicht verwendet wird. Wenn benötigt kann man das nearest() auch vermeiden, wenn man ein zum B. div.wrapper um alles packt, dann nearest() ersetzt durch parents("div.wrapper").find("div") )

Cheers,
Baba

[Matthias Apsel]

Om nah hoo pez nyeetz, Baba!

Irgendwie würde ich einfach das vorschlagen. Aber das sehe ich wohl verkehrt...?!?

Wie gesagt: Ohne Kenntnis der konkreten Seite ist alles Spekulation. Der gezeigte Code lässt viel Vereinfachungspotenzial vermuten.

Allerdings läßt sich auch bei dir auf die zweite Klassenänderung verzichten. Schließlich gibt es CSS.

Matthias