Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]toogle, slideup nie działa przy ul
Forum PHP.pl > Forum > Przedszkole
GoOx
Cześć,

Chciałem zrobić menu a ponieważ będzie miało dużo odnośników chciałem aby było rozsuwane. Ale tu już napotkałem już 1 problem.

  1. <script type='text/javascript'>
  2. function show_menu(cat) {
  3. $('#'+cat).slideDown(200);
  4. }
  5.  
  6. function hide_menu(cat) {
  7. $('#'+cat).slideUp(200);
  8. }
  9.  
  10. <div id='ext'>
  11. <div id='menu'>
  12. <div class='category' onmouseover="show_menu('cat1');" onmouseout="hide_menu('cat1');">Kategoria 1</div>
  13. <ul id='cat1'>
  14. <li>Odnosnik1 cat1</li>
  15. <li>Odnosnik2 cat1</li>
  16. <li>Odnosnik3 cat1</li>
  17. </ul>
  18. <div class='category' onmouseover="show_menu('cat2');" onmouseout="hide_menu('cat2');">Kategoria 2</div>
  19. <ul id='cat2'>
  20. <li>Odnosnik1 cat2</li>
  21. <li>Odnosnik2 cat2</li>
  22. <li>Odnosnik3 cat2</li>
  23. </ul>
  24. <div class='category' onmouseover="show_menu('cat3');" onmouseout="hide_menu('cat3');">Kategoria 3</div>
  25. <ul id='cat3'>
  26. <li>Odnosnik1 cat3</li>
  27. <li>Odnosnik2 cat3</li>
  28. <li>Odnosnik3 cat3</li>
  29. </ul>


Chodzi o to, że menu próbuje się rozwinąć ale po chwili wraca i nic z tego. jak zmieniłem ul na div było ok, ale to nie ten efekt chcę uzyskać. Próbowałem też z toggle, ale mam ten sam efekt.
b4rt3kk
Jak już używasz jQuery to nie zaśmiecaj kodu HTML, tylko wszelkie akcje dla elementów przypisuj poprzez skrypt. To po pierwsze. Po drugie, daj mouseleave, a nie out i przypisz do ul, a nie do div, bo to nie ma żadnego sensu, zjedziesz z diva żeby kliknąć, a się menu zsunie.
GoOx
Piszesz tak jakbym wiedział co mam zrobić.

$('ul#'+cat).slideUp(200);

Jak zrobię tak to już wgl nie działa. Zamiast wytłumaczyć to dyktujesz mi co mam zrobić. a odpowiedź mam sobie wyczarować?
b4rt3kk
Myślałem, że wiesz co robisz? I że moja odpowiedź nieco rozjaśni Ci sprawę.

  1. <script type='text/javascript'>
  2. $(function() {
  3. $('.category').mouseenter(function(){
  4. $(this).children('ul').slideDown(200);
  5. });
  6. $('ul').mouseleave(function(){
  7. $(this).slideUp(200);
  8. });
  9. });
  10.  
  11.  
  12. <div id='ext'>
  13. <div id='menu'>
  14. <div class='category'>Kategoria 1</div>
  15. <ul id='cat1'>
  16. <li>Odnosnik1 cat1</li>
  17. <li>Odnosnik2 cat1</li>
  18. <li>Odnosnik3 cat1</li>
  19. </ul>
  20. <div class='category'>Kategoria 2</div>
  21. <ul id='cat2'>
  22. <li>Odnosnik1 cat2</li>
  23. <li>Odnosnik2 cat2</li>
  24. <li>Odnosnik3 cat2</li>
  25. </ul>
  26. <div class='category'>Kategoria 3</div>
  27. <ul id='cat3'>
  28. <li>Odnosnik1 cat3</li>
  29. <li>Odnosnik2 cat3</li>
  30. <li>Odnosnik3 cat3</li>
  31. </ul>


Czy to się okazało bardziej pomocne i obrazowe?
GoOx
W ten sposób już próbowałem, i z niewiadomych powodów dawało efekt taki że nic nie działało.

Już niby na parwiłem, ale nie jest tak jak być powinno ul dałem w div i nazwałem id niby działa.
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.