[JavaScript]Test Opcje

[-jQuery-]

Witam, zrobiłem sobie takie menu z kategoriami, i chcę zrobić podkategorie.

[HTML] pobierz, plaintext 
<ul class="nav">
					<li>
						Pierwsza pomoc
						<ul class="subnav">
							<li><a href="#">Test 1</a></li>
							<li><a href="#">Test 2</a></li>
							<li><a href="#">Test 3</a></li>
							<li><a href="#">Test 4</a></li>
						</ul>
					</li>
					<li>Praca</li>
					<li>Bezpieczny kierowca</li>
					<li>Bezpieczne finanse</li>
					<li>Bezpieczny dom / mieszkanie</li>
					<li>Placówki oświatowe</li>
					<li>Prawo na codzień</li>
					<li>Ratownictwo medyczne</li>
					<li>Straż pożarna</li>
					<li>Bezpieczne wakacje</li>
					<li>Bezpieczne środowisko</li>
					<li>Procedury</li>
					<li>
						Zdrowie i uroda
						<ul class="subnav">
							<li><a href="#">Test 1</a></li>
							<li><a href="#">Test 2</a></li>
							<li><a href="#">Test 3</a></li>
							<li><a href="#">Test 4</a></li>
						</ul>
					</li>
				</ul>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
$(".nav li").click(function(){
		if($(this).has( "ul" )) 
		{
			if($(this).children(':hidden').length == 0) 
			{
				$(this).children().toggle();
				$(this).css("background", "url(images/plus.png) left top no-repeat");
			}
			else
			{
				$(this).children().toggle();
				$(this).css("background", "url(images/minus.png) left top no-repeat");	
			}
 		}
 	});
[HTML] pobierz, plaintext 

Ogólnie działa, gdy klikne na li z klasy .nav otworzy się ul z klasy subnav. Oto mój problem. Chciałbym żeby toogle itp, wykonywało się tylko dla li z klasy .nav, a ona wykonuje się także dla li z klasy .sidenav, zmieniając mu background, itp.
Kolejny problem to gdy klikne li z klasy sidenav to całe ul subnav się zamyka, chciałbym żeby zamykało się tylko po kliknięciu li z .nav.

Pozdrawiam

[lobopol]

o to ci chodzi?:

[JAVASCRIPT] pobierz, plaintext 
$(".nav > li").click(function(){
   var $this = $(this); //szanuj DOM
		if($this.has( "ul" )) 
		{
                        $this.children().toggle();
			if($this.children(':hidden').length == 0) 
			{
				$this.css("background", "url(images/plus.png) left top no-repeat");
			} else {
				$this.css("background", "url(images/minus.png) left top no-repeat");	
			}
 		}
 	})
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował lobopol 14.10.2013, 17:52:07