Skocz do zawartości

Zdjęcie
- - - - -

.slideToggle w przypadku WordPressa


Brak odpowiedzi do tego tematu
  • Zaloguj się, aby dodać odpowiedź
wolfdz

    Stary wyjadacz

  • PipPipPip
  • 252 postów
    • Czas spędzony online: 10d 19m 41s
14
Dobra
  • LocationKraśnik

Napisano 18 marca 2016 - 17:35

#1

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.


  • 1





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych