Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] jak "złapać" najbliższy element w kontenerze z klasą?
siutek
post 21.03.2018, 08:13:14
Post #1





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Witam, mam menu w postaci jak poniżej:
  1. <ul>
  2. <li><a>txt 1</a></li>
  3. <li class="menu-item-has-children">
  4. <a>posiada podmenu</a>
  5. <ul class="sub-menu">
  6. <li><a>txt 1</a></li>
  7. <li class="menu-item-has-children">
  8. <a>posiada podmenu</a>
  9. <ul class="sub-menu">
  10. <li><a>txt 1</a></li>
  11. <li><a>txt 2</a></li>
  12. <li><a>txt 3</a></li>
  13. </ul>
  14. </li>
  15. <li><a>txt 3</a></li>
  16. </ul>
  17. </li>
  18. <li><a href="">txt 3</a></li>
  19. <li class="menu-item-has-children">
  20. <a>posiada podmenu</a>
  21. <ul class="sub-menu">
  22. <li><a>txt 1</a></li>
  23. <li><a>txt 2</a></li>
  24. <li><a>txt 3</a></li>
  25. </ul>
  26. </li>
  27. </ul>


Kod jQuery:
  1. var $ = jQuery;
  2. $(function() {
  3. $( ".menu-item-has-children a" ).click(function() {
  4.  
  5. $( ".sub-menu", this ).next().toggle(200);
  6.  
  7. });
  8. });


oraz kod css:
  1. a {
  2. padding:20px;
  3. display:block;
  4. background-color:silver;
  5. width:100px;
  6. cursor: pointer;
  7. text-align: center;
  8. }
  9. li {
  10. margin: 15px 0;
  11. padding: 15px;
  12. background-color: grey;
  13. display: block;
  14. width:140px;
  15. }
  16. .sub-menu {
  17. display: none;
  18. }


Nie wiem jak sprawić by naciśnięcie odnośnika A, który znajduje się wewnątrz <li></li> z klasą .menu-item-has-child spowodowało pokazanie podmenu z klasą .sub-menu, które znajduje się w bezpośrednim sąsiedztwie, tak bym mógł otwierać kolejne zagnieżdzęnia.

Od razu uprzedzam dociekliwych: jestem noga z JS i jQuery :/ więc jeśli zobaczycie coś dziwnego w kodzie, to jest to wynik mojej niewiedzy.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
aras785
post 21.03.2018, 10:38:43
Post #2





Grupa: Zarejestrowani
Postów: 859
Pomógł: 177
Dołączył: 29.10.2009

Ostrzeżenie: (0%)
-----


https://jsfiddle.net/0p7wm7s2/7/

lub

https://jsfiddle.net/0p7wm7s2/9/

Ten post edytował aras785 21.03.2018, 10:41:14
Go to the top of the page
+Quote Post
siutek
post 21.03.2018, 11:37:45
Post #3





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Cytat(aras785 @ 21.03.2018, 11:38:43 ) *


pierwszy link! bingo!
działą elegancko smile.gif

dziękuję, kłaniam się nisko smile.gif
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 26.04.2024 - 20:26