Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jQuery
Forum PHP.pl > Forum > Po stronie przeglądarki
Manwe89
Otóż mam menu:
  1. <div id="menu">
  2. <ul>
  3. <li>
  4. <a id="link1" href='#'>Element 1</a>
  5. <ul class="submenu" id="sub1">
  6. <li><a href="#">Jeden</a></li>
  7. <li><a href="#">Dwa</a></li>
  8. <li><a href="#">Trzy</a></li>
  9. </ul>
  10. </li>
  11. <li>
  12. <a id="link2" href='#'>Element 2</a>
  13. <ul class="submenu" id="sub2">
  14. <li><a href="#">Jeden</a></li>
  15. <li><a href="#">Dwa</a></li>
  16. <li><a href="#">Trzy</a></li>
  17. </ul>
  18. </li>
  19. <li>
  20. <a id="link3" href='#'>Element 3</a>
  21. <ul class="submenu" id="sub3">
  22. <li><a href="#">Jeden</a></li>
  23. <li><a href="#">Dwa</a></li>
  24. <li><a href="#">Trzy</a></li>
  25. </ul>
  26. </li>
  27. <li>
  28. <a id="link4" href='#'>Element 4</a>
  29. <ul class="submenu" id="sub4">
  30. <li><a href="#">Jeden</a></li>
  31. <li><a href="#">Dwa</a></li>
  32. <li><a href="#">Trzy</a></li>
  33. </ul>
  34. </li>
  35. </ul>
  36. </div>


no i teraz mam pytanie. Jak zrobic w jQuery taki myk, zeby po kliknieciu powiedzmy w link1 rozwinelo sie submenu o id sub1, w link2 -> sub2 itd. rekurencyjnie. Budowanie w jQuery oddzielnego kodu dla kazdego przypadku zwieksza wage skryptu. Biorac pod uwage fakt ze jest to tylko szkielet musze brac na poprawke mozliwosc znacznego rozbudowania. Wszyscy mowili ze jQuery jest takie fajne smile.gif w czystym js daloby rade napisac funkcje ktora by to robila ze wzgl na podane parametry. Czy w jQuery da rade zrobic cos podobnego? Czy pozostaje mi tylko budowa funkcji w js, ktora bedzie tworzyla odpowiednie wywolanie funkcji w jQuery?
erix
Cytat
Wszyscy mowili ze jQuery jest takie fajne

I jest fajne, tylko trzeba zrozumieć, w jaki sposób możesz poruszać się po drzewie DOM.

Cytat
zeby po kliknieciu powiedzmy w link1 rozwinelo sie submenu o id sub1, w link2 -> sub2 itd. rekurencyjnie.

W Twoim przypadku, to nie jest rekurencja, tylko takie podpinanie zdarzeń, aby nie było potrzeby pisania uchwytu dla każdego linka z osobna.

Z palca:
Kod
$(document).ready(function(){
   $('#menu > a').click(function(e){
      e.preventDefault();
      $(this).parent().find('u').slideDown();
   });
});
Manwe89
teraz sztuka polega na tym zeby zrozumiec smile.gif
tak wiec po kliknieciu wywolywana jest funkcja do której jest przekazywane zdarzenie.
preventDefault? anuluje zdarzenie jesli to mozliwe... po co to?
$(this) -> wskazuje na wybrany element
.parent() -> po co?
.find('u') -> czaje
.slideDown() czaje smile.gif
kubetson
Kod
preventDefault? anuluje zdarzenie jesli to mozliwe... po co to?


To zapobiega realizacji domyślnej funkcji zdarzenia, czyli przejścia do linku. W Twoim przypadku jest to "#", a to chyba może działać tak, że będzie Cie przenosić na samą górę strony, a tego nie chcemy
Manwe89
yhm smile.gif dosyc ciekawe smile.gif jeszcze enigmatyczna kwestia jest tylko dla mnie po co ten parent()? biggrin.gif

Cytat(erix @ 2.04.2009, 12:08:39 ) *
Z palca:
Kod
$(document).ready(function(){
      $('#menu > a').click(function(e){
         e.preventDefault();
         $(this).parent().find('u').slideDown();
      });
   });


zmieniłem na:
Kod
$(document).ready(function(){
      $('#menu > ul > li> a').click(function(e){
         e.preventDefault();
         $(this).parent().find('ul').slideDown();
      });
   });


i juz smiga smile.gif dziekowa smile.gif

a na sam koniec zrobilem tak:
Kod
$(document).ready(function(){
    $('#menu > ul > li> a').toggle(
     function(e){
        e.preventDefault();
        $(this).parent().find('ul').slideDown();
     },
     function(e){
       e.patrentDefault();
       $(this).parent().find('ul').slideUp();
     })
});

i działa we dwie strony smile.gif
i jeszcze jedno pytanko. Bo kiedy zrobie tak:
Kod
$(document).ready(function(){
    $('#menu > ul > li> a').toggle(
     function(e){
        e.preventDefault();
       $('#menu > ul > li > ul').slideUp();
        $(this).parent().find('ul').slideDown();
     },
     function(e){
       e.patrentDefault();
       $(this).parent().find('ul').slideUp();
     })
});

to nie zawsze dziala rozwijanie. Tzn. kidy klikam na <li>ponizsze to ladnie, a kiedy na <li> wyzsze od aktualnie kliknietego to dopiro za drugim razem dziala. Jak mam "wyrzucic" z slideUp aktualnie kliknietego <li>?
erix
Kod
i juz smiga  dziekowa

Literówka; miałem na myśli listę.

Cytat
to nie zawsze dziala rozwijanie. Tzn. kidy klikam na <li>ponizsze to ladnie, a kiedy na <li> wyzsze od aktualnie kliknietego to dopiro za drugim razem dziala. Jak mam "wyrzucic" z slideUp aktualnie kliknietego <li>?

Strzelam, że jest to powiązane z selektorami. > nakazuje przeszukiwanie dla najbliższego podrzędnego poziomu, a bez tego selektora - wszystkie dzieci o takim tagu; nawet "dzieci dzieci". winksmiley.jpg
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-2024 Invision Power Services, Inc.