Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Test
Forum PHP.pl > Forum > Przedszkole
jQuery
Witam, zrobiłem sobie takie menu z kategoriami, i chcę zrobić podkategorie.

  1. <ul class="nav">
  2. <li>
  3. Pierwsza pomoc
  4. <ul class="subnav">
  5. <li><a href="#">Test 1</a></li>
  6. <li><a href="#">Test 2</a></li>
  7. <li><a href="#">Test 3</a></li>
  8. <li><a href="#">Test 4</a></li>
  9. </ul>
  10. </li>
  11. <li>Praca</li>
  12. <li>Bezpieczny kierowca</li>
  13. <li>Bezpieczne finanse</li>
  14. <li>Bezpieczny dom / mieszkanie</li>
  15. <li>Placówki oświatowe</li>
  16. <li>Prawo na codzień</li>
  17. <li>Ratownictwo medyczne</li>
  18. <li>Straż pożarna</li>
  19. <li>Bezpieczne wakacje</li>
  20. <li>Bezpieczne środowisko</li>
  21. <li>Procedury</li>
  22. <li>
  23. Zdrowie i uroda
  24. <ul class="subnav">
  25. <li><a href="#">Test 1</a></li>
  26. <li><a href="#">Test 2</a></li>
  27. <li><a href="#">Test 3</a></li>
  28. <li><a href="#">Test 4</a></li>
  29. </ul>
  30. </li>
  31. </ul>


  1. $(".nav li").click(function(){
  2. if($(this).has( "ul" ))
  3. {
  4. if($(this).children(':hidden').length == 0)
  5. {
  6. $(this).children().toggle();
  7. $(this).css("background", "url(images/plus.png) left top no-repeat");
  8. }
  9. else
  10. {
  11. $(this).children().toggle();
  12. $(this).css("background", "url(images/minus.png) left top no-repeat");
  13. }
  14. }
  15. });


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
  1. $(".nav > li").click(function(){
  2. var $this = $(this); //szanuj DOM
  3. if($this.has( "ul" ))
  4. {
  5. $this.children().toggle();
  6. if($this.children(':hidden').length == 0)
  7. {
  8. $this.css("background", "url(images/plus.png) left top no-repeat");
  9. } else {
  10. $this.css("background", "url(images/minus.png) left top no-repeat");
  11. }
  12. }
  13. })
[JAVASCRIPT] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.