JQuery - Untermenüpunkte sliden lassen

[Jan-Frederik Stieler]

Hallo,
ich hab ein kleines Problem mit einem Menü (UL) welches beim clicken die Kind Liste aufklappen soll. Bei mir werden alle existierenden Untermenüs aufgeklappt welche die Klasse .parent haben.
Wie kann ich den das realisieren das nur die Liste aufgeht welche gerade angeklickt wurde?
Ich könnte natürlich für jeden Menüpunkt über die ItemID das Aufklappen realisieren. Aber das wäre ein sehr steifes Script welches ich bei jeder Menüanpassung mit anpassen müßte.

$(document).ready(function() {

	$('#topright , li.parent ul, li.parent ul ul').hide();
	$('#topleft a').click(function(){
		
		if( $('#topright').is(':hidden') ) {
    		$('#topright').fadeIn();
		}
		else {
    		$('#topright').fadeOut();
		}

	});

	$('li.parent a').click(function(){
	
		if( $('li.parent').children('ul').is(':hidden') ) {
    		$('li.parent').children('ul').slideDown();
		}
		else {
    		$('li.parent').children('ul').slideUp();
		}	
	});
});

<div id="topleft">
<ul>
<li><a href="#">Landwirtschaft</a></li>
<li><a href="#">Hofladen</a></li>
</ul>
</div>	
	
<div id="topright">
<ul class="menu" id="sub1">
	<li class="item7"><a href="#">Wer</a></li>
	<li class="item8"><a href="#">Wo</a></li>
	<li id="current" class="parent active item12"><a href="#">Produkte.</a>
		<ul>
			<li class="parent item35"><a href="#">Eigen Marke</a>
				<ul>
					<li class="item42"><a href="#">Chutney</a></li>
					<li class="item43"><a href="#">Erdbeermarmelade</a></li>
					<li class="item44"><a href="#">Eier</a></li>
					<li class="item45"><a href="#">Kürbiskernöl</a></li>
					<li class="item46"><a href="#">Spargel</a></li>
					<li class="item47"><a href="#">Erbeeren</a></li>
					<li class="item48"><a href="#">Kürbis</a></li>
				</ul>
			</li>
			<li class="item36"><a href="#">Grundnahrungsmittel</a></li>
			<li class="item37"><a href="#">Milchprodukte</a></li>
			<li class="item38"><a href="#">Fisch Fleisch Geflügel</a></li>
			<li class="item39"><a href="#">Obst</a></li>
			<li class="item40"><a href="#">Salat und Gemüse</a></li>
			<li class="item41"><a href="#">Getränke</a></li>
		</ul>
	</li>
	<li class="parent item11"><a href="#">Saisonhöhepunkte</a>
		<ul>
			<li class="item27"><a href="#">Allerheiligen</a></li>
			<li class="item28"><a href="#">Erbeersaison</a></li>
			<li class="item29"><a href="#">herbstlese</a></li>
			<li class="item30"><a href="#">Spargelsaison</a></li>
			<li class="item31"><a href="#">Grillsaison</a></li>
			<li class="item32"><a href="#">Martinstag</a></li>
			<li class="item33"><a href="#">Weihnachten</a></li>
		</ul>
	</li>
	<li class="parent item10"><a href="#">Rezepte</a>
		<ul>
			<li class="item17"><a href="#">Martinsgänse</a></li>
			<li class="item18"><a href="#">Würste</a></li>
			<li class="item19"><a href="#">Forelle</a></li>
			<li class="item20"><a href="#">Kürbis</a></li>
			<li class="item21"><a href="#">Erbeeren</a></li>
			<li class="item22"><a href="#">Spargel</a></li>
			<li class="item23"><a href="#">Kürbiskernöl</a></li>
			<li class="item24"><a href="#">Eier</a></li>
			<li class="item25"><a href="#">Marmelade</a></li>
			<li class="item26"><a href="#">Chutney</a></li>
		</ul>
	</li>
	<li class="item13"><a href="#">Kontakt</a></li>
	<li class="item14"><a href="#">Impressum</a></li>
</ul>
</div>

Viele Grüße

 

[Quaese]

Hi,

ermittel vom auslösenden Element (this) den nächsten Elternknoten mit der Klasse parent (parent('.parent')). Von diesem ausgehend slidest du die Listen.

    $('li.parent a').click(function(){
        if( $(this).parent('.parent').children('ul').is(':hidden') ) {
            $(this).parent('.parent').children('ul').slideDown();
        }
        else {
            $(this).parent('.parent').children('ul').slideUp();
        }
    });

Ciao
Quaese

 

[Jan-Frederik Stieler]

Aha, wieder wat erlernt.
ICh hab nun mit disem Menü noch zwei weitere Probleme. Undzwar ändert jQuery ja das Display auf Block während geslided wird. Ich hab aber das Menü mittels Display:inline horizontal ausgerichtet, das heißt ja nun mir zerkloppt es dasm Menü während geslideds wird. Gibts dafür ne Lösung bzw. Lösungsansatz?

Das andere ist ein Problem mit Joomla. Wenn ich ein Link drücke dann wird ja die Seite geladen, heißt das Menü fängt an zu sliden die Seite wird geladen und das unetrmenü ist natürlich nicht ichtbar sondern erst wenn ich den Menüpunkt nochmal klicke. Gibts da irgendeine Möglichkeit sozusagen das Menü vom neuladen auszunehemen oder sowas?

Viele Grüße

 

[CPoly]

Undzwar ändert jQuery ja das Display auf Block während geslided wird. Ich hab aber das Menü mittels Display:inline horizontal ausgerichtet, das heißt ja nun mir zerkloppt es dasm Menü während geslideds wird. Gibts dafür ne Lösung bzw. Lösungsansatz?

Bei hide() merkt sich jQuery welchen Wert "display" vorher hatte.

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Ob es bei slideUp() genauso ist, weiß ich nicht. Setz mal direkt vorher das Attribut auf inline.

css("display", "inline").slideUp();