Keskustelu: Nettisivujen teko: menun muokkaus jquerylla

Yritän parhaillaan jqueryn avulla muokata nettisivujeni valikkoa fiksummaksi. Tällä hetkellä valikko tulee seuraavan kaltaisena ulos.

<div id="navi">
	<ul class="treenavi">
		<li id="listitem-413" class="listitem level0"><a href="/home/"  class="treemenu-link  level0"><span>Home</span></a></li>
		<li id="listitem-415" class="listitem withsub level0 current"><a href="/ekasivu/"  class="treemenu-link  level0 current"><span>Eka sivu</span></a>
			<ul class="treenavi">
				<li id="listitem-417" class="listitem level1 current"><a href="/ekasivu/eka_alasivu"  class="treemenu-link  level1 current"><span>Eka alasivu</span></a></li>
				<li id="listitem-418" class="listitem level1"><a href="/ekasivu/toka_alasivu/"  class="treemenu-link  level1"><span>Toka alasivu</span></a></li>
				<li id="listitem-419" class="listitem level1"><a href="/ekasivu/kolmas_alasivu/"  class="treemenu-link  level1"><span>Kolmas alasivu</span></a></li>
			</ul>
		</li>
		<li id="listitem-422" class="listitem withsub level0"><a href="/tokasivu/"  class="treemenu-link  level0"><span>Toka sivu</span></a>
			<ul class="treenavi">
				<li id="listitem-434" class="listitem withsub level1"><a href="/tokasivu/eka_alasivu/"  class="treemenu-link  level1"><span>Tokan eka alasivu</span></a>
					<ul class="treenavi">
						<li id="listitem-441" class="listitem level2"><a href="/tokasivu/eka_ala_alasivu/"  class="treemenu-link  level2"><span>Tokan eka ala-alasivu</span></a></li>
						<li id="listitem-442" class="listitem level2"><a href="/tokasivu/toka_ala_alasivu/"  class="treemenu-link  level2"><span>Tokan toinen ala-alasivu</span></a></li>
						<li id="listitem-443" class="listitem level2"><a href="/tokasivu/kolmas_ala_alasivu"  class="treemenu-link  level2"><span>Tokan kolmas ala-alasivu</span></a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

Joka siis näyttää suurinpiirtein seuraavalta:

Home
Eka sivu
- Eka alasivu
- Toka alasivu
- Kolmas alasivu
Tokasivu
- Tokan eka alasivu
-- Tokan eka ala-alasivu
-- Tokan toinen ala-alasivu
-- Tokan kolmas ala-alasivu

Jquery viritelmäni näyttää tältä:

$(document).ready(function() {

	$('.level1').hide();
	$('.level2').hide();

	$('li').click(function() {
		//$(this).children().toggle();
		$('.level1').toggle();
	});

});

Tavoitteenani olisi saada valikko toimimaan niin, että aluksi vain ylin valikkotaso(level0) on näkyvillä:

Home
Eka sivu
Tokasivu

Sen jälkeen valikon kohtaa klikkaamalla pitäisi avautua/sulkeutua seuraava taso togglen avulla.

Eli kun valikosta klikkaa "Eka sivu"-linkkiä, tulisi sen jälkeen avautua näkymä:

Home
Eka sivu
- Eka alasivu
- Toka alasivu
- Kolmas alasivu
Tokasivu

Ja kun "Eka sivua" klikkaa uudestaan tulisi alasivujen jälleen sulkeutua. Vastaavan tulisi tapahtua myös muille alasivuille ja "ala-alasivuille".

Tällä hetkellä siis ongelmani on, että en löydä runsaasta etsinnästä huolimatta oikeaa tapaa sille miten saisin valikon klikkauksen avaamaan vain kyseisen valikon alavalikot(childrens tms.. olen kokeillut, kuten kommentoituna jquerykoodissani näkyy. mutta ilmeisesti kovin väärin.) Nyt siis level0-valikkoa klikkaamalla aukeavat kaikki level1 valikot, mikä ei ole fiksua.

Jos jollain olisi heittää vinkkiä miten asiaa kannattaisi jatkaa/lähestyä olisin hyvin kiitollinen.

Mod. korjasi kooditagit!

http://pastebin.com/gR0AaxB5

Tuollaisella lähtisin itse. Jättäisin tosin käärimättä a-elementteihin ne valikon kohteet, jotka eivät ole itse linkkejä vaan alavalikoiden otsikoita. Esimerkkiini jätin kuitenkin a:t, kun vähensi CSS:n tarvetta. Valikkoni toimii myös ilman JavaScriptiä. JS:llä tuota voisi parannella esim. niin, että poistaa kiinteän leveyden ja siirtää alavalikon dynaamisesti oikeaan kohtaan niin, että se on ylemmän tason listassa kiinni.

Unohdin kommentoida koodin vaikka tarkoitus oli.