Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [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: 152
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
trueblue
post 21.03.2018, 08:23:15
Post #2





Grupa: Zarejestrowani
Postów: 5 194
Pomógł: 1441
Dołączył: 11.03.2014

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


Po prostu
  1. $(this).next()


Ale dlaczego używasz <a> do otwierania podmenu? Kliknięcie dodawaj bezpośrednio na <li> i również w nim zawrzyj tekst, który obecnie jest w linku.
Go to the top of the page
+Quote Post
siutek
post 21.03.2018, 08:43:44
Post #3





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

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


nie mogę na <li> dlatego, że mam menu wielopoziomowe. i ponowne kliknięcie w element o klasie .menu-item-has-child powoduje zwinięcie tego co przed chwilą rozwinąłem. Dlatego musiałem się ograniczyć do <a> który swym zasięgiem nie obejmuje kolejnych .sub-menu. Nie wiem czy dobrze wytłumaczyłem...

Jeśli któryś element <li> na najwyższym poziomie ma klasę .menu-item-has-children, to kliknięcie w niego powoduje rozwinięcie .submenu, które znajduje się w nim. I teraz, jeśli w tym submenu kolejny element <li> ma klasę .menu-item-has-children to chciałbym móc je rozwinąć, niestety klikając w niego klikam jednocześnie w cały <li> nadrzędny z pierwszego poziomu, co skutkuje owszem rozwinięciem tego co chce, ale jednocześnie zwijam element nadrzędny...

https://codepen.io/siutek/pen/EEWLRr
Go to the top of the page
+Quote Post
trueblue
post 21.03.2018, 09:58:10
Post #4





Grupa: Zarejestrowani
Postów: 5 194
Pomógł: 1441
Dołączył: 11.03.2014

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


https://jsfiddle.net/0p7wm7s2/
Go to the top of the page
+Quote Post
siutek
post 21.03.2018, 10:33:24
Post #5





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

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


@trueblue usunąłeś linka <a>posiada podmenu</a>, a ja niestety nie mogę tak zrobić, gdyż wykonuję te wszystkie operacje na menu wygenerowanym przez wordpressa, w którym A będzie zawsze (bez większej rzeźby), bez względu na to czy ma podmenu czy nie.
Go to the top of the page
+Quote Post
aras785
post 21.03.2018, 10:38:43
Post #6





Grupa: Zarejestrowani
Postów: 755
Pomógł: 149
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 #7





Grupa: Zarejestrowani
Postów: 152
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

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: 23.10.2018 - 23:58