Nie chce korzystać z jakiś gotowych pluginów do WP bo jedynie utrudnię sobie zadanie.
Mam problem z menu w projekcie szablonu pod WP, w HTML wszystko ładnie wygląda ale gdy przerzucę to na WP to już nie wszystko będzie tak pięknie. Chodzi mi dokładnie o menu i submenu. Nie bawie się w hovery bo na telefonie (w moim przypadku) muszę mocniej naciskać a czasami i to nie działa, dlatego bawie się w "klikalne" submenu. No i do tego używam nastepującego, prostego kodu:
$(document).ready(function() { $('.dropdown').click(function() { $('.dropdown-menu').slideToggle(500); }); });
Szkielet menu wygląda następująco:
<ul class="navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Events</a></li> <li><a href="#">Forum</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle">Tutorials <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Polish</a></li> <li><a href="#">English</a></li> <li><a href="#">Turkey</a></li> </ul> </li> <li><a href="#">Social</a></li> <li><a href="#">Video</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle">Others <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Polish</a></li> <li><a href="#">English</a></li> <li><a href="#">Turkey</a></li> </ul> </li> </ul>
Jest to fragment menu z bootstrapa ale nie chce wykorzystuje go w 100% bo mi po prostu nie odpowiada. No i nie trzeba być geniuszem aby wiedzieć, że po kliknięciu w li, które jako klase ma .dropdown wysunie się box z submenu, ale (jestem tego świadomy) wysuną się wszystkie boxy ponieważ klasa .dropdown występuje więcej niż raz. Dlatego mam pytanie, czy jakoś do tego kodu JS co podałem wyżej można dodać zasadę/regułę aby wysunęło box w momencie klikniecia tego jednego, wybranego .dropdown a nie wszystkich? Mogę sie posłużyć również ID ale w przypadku WP trzeba by było później zmieniać a chce tego uniknąć. Nie rozglądałem się za innymi propozycjami więc jak coś to mozecie również pokierować mnie na podobne rozwiązania
Problem rozwiązany, zmieniłem po prostu środkową linijkę dodając do niej (this)
$(this).children('.dropdown-menu').slideToggle(500);
A sądziłem, że będzie to bardziej skomplikowane
Jakby jednak był jakiś błąd to proszę o poprawne nakierowanie.