JQuery Slide bei vielen Elementen

bastey

Intermediate

Posts: 122

Wednesday, December 29th 2010, 11:07am

JQuery Slide bei vielen Elementen

Hallo,

ich benutze JQuery um bestimmte Elemente bei einem Klick auf das H3-Element aufzusliden. Hier der Code:

HTML Code

<div class="slide"> 
<h3 class="slide_1">Links</h3> 
<ul class="slide_1" style="display:none;"> 
<li>...</li>
<li> ...</li>
</ul>
</div>

Dazugehörig der JQuery-Code:

JavaScript Code

$(document).ready(function () {
							    $('h3.slide_1').click(function () {
								$('ul.slide_1').slideToggle('fast');
							    });
							});

Bei mehreren Elementen hatte ich bisher immer den HTML-Code und den Javascriptecode um die entsprechende Anzahl der Einträge erweitert. Nun möchte ich aber, dass automatisch jeder Eintrag, der so aufgebaut ist:

	HTML Code
1 2 3 4	<h3 class="slide">Topic</h3> <ul style="display: none;" class="slide"> <li>...</li> </ul>

automatisch erkannt wird und eine entsprechende Funktion erstellt wird. Ich hoffe ihr könnt mich verstehen und wisst, was ich meine.
Ich bin selber halt nen kleiner Anfänger, was Javascript angeht. Ich dachte anfangs an eine Schleife, die alle Elemente durchzählt und die entsprechende JS-Funktion erstellt. Jedoch weiß ich nicht, wie ich das Problem löse, dass halt durch das anklicken dieses einen Elements (h3-Tag) auch nur der dazugehörige Listenbereich geslidet wird.

Torben Brodt

Administrator

Posts: 8,454

Wednesday, December 29th 2010, 5:36pm

Versuche mal deinen Aufbau in einen Pfad zu übersetzen.
Firebug hilft dir dabei. Wenn du den Pfad erstmal hast dann kannst du mit Jquery problemlos eine Funktion auf all diese Elemente anwenden.

Beispiel:

	JavaScript Code
1	$('ul.slide').slideToggle('fast');

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

bastey

Intermediate

Posts: 122

Thursday, December 30th 2010, 11:25am

Führt das nicht zu dem Problem, dass alle Elemente sich bei einem einzigem Klick bewegen?

Torben Brodt

Administrator

Posts: 8,454

Thursday, December 30th 2010, 1:04pm

achso, ich habs falsch verstanden. Ich dachte du wolltest alles gleichzeitig einfahren. Nun möchtest du aber auf alle gleichzeitig den Klick Event anwenden.
Die Anforderungen sind also nicht ganz anders.

Schritt1

	JavaScript Code
1 2 3	$('h3.slide').click(function() { alert('ich wurde geklickt'); });

funktioniert?

Nun musst du statt dem alert natürlich was sinnvolles machen..
Schau dir dazu am besten mal die jQuery DOM Seite an: http://docs.jquery.com/DOM/Traversing
Das ul liegt auf gleicher Ebene. Also solltest du es mit next(ul) adressieren können:

	JavaScript Code
1 2 3	$('h3.slide').click(function() { $(this).next('ul').slideToggle('fast'); });

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

bastey

Intermediate

Posts: 122

Friday, December 31st 2010, 11:58am

Quoted from "d0nut"

Das ul liegt auf gleicher Ebene. Also solltest du es mit next(ul) adressieren können:

	JavaScript Code
1 2 3	$('h3.slide').click(function() { $(this).next('ul').slideToggle('fast'); });

Next ist genau das, was ich brauche. Danke.

JochenMueller1973

Beginner

Posts: 3

Sunday, June 5th 2011, 11:15am

Wenn man nun aber auf ein Link klickt den man mit $(this).next('ul').slideToggle('fast'); eingeblendet hat, springt der browser nach oben

Beispiel:

Quoted

$(document).ready(function() {
$('#nav > ul > li > a').click(function() {
$(this).next('ul').slideToggle();
return false;
});
});

Das return false; verhindert den Sprung auch nicht, hat jemand da ein Lösung?

Torben Brodt

Administrator

Posts: 8,454

Sunday, June 5th 2011, 2:56pm

doch, das return false verhindert dass der Browser nach oben springt.
Wenn es allerdings zu fehlern in deinem Script kommt (Variable nicht definiert, etc) - dann springt der Browser nach oben.

Einfacher Beweis:

HTML Code

<div style="height:2000px"></div>
 
<a href="">click</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('a').click(function() {
		alert('do toggle');
		return false;
	});
});
</script>