Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] jak "złapać" najbliższy element w kontenerze z klasą?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
siutek
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.
trueblue
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.
siutek
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
trueblue
https://jsfiddle.net/0p7wm7s2/
siutek
@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.
siutek
Cytat(aras785 @ 21.03.2018, 11:38:43 ) *


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

dziękuję, kłaniam się nisko smile.gif
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.