Dropdown menu nie wyświetla się

Question

Cześć,

ogólnie zawsze korzystam z bootstrapowskiego dropdowna menu, ale napisałem swoje menu, i na mobilce dropdown nie działa. Na mobilce dropdown musi być dwupoziomowy, niestety ponad 3h się męcze i nie mam pomysłu już jak zrobić ten dropdown tak by działał. Wrzucam kod bez php, bo menu generuje dynamicznie, więc wrzucam html i css. Ma ktoś jakiś pomysł jak to zrobić? po prawej stronie powinna być ikona na rozwijanie. Po kliknięciu rozwijam podmenu, a następnie podmenu. Na desktopie mam wielopoziomowe i śmiga.

https://jsbin.com/pifoxojise/edit?html,css,js,output

Answer 1

Udało mi się osiągnąć cel. Jest tylko jeden problem. Jeśli klikam aby otworzył się dropdown to otwierają się wszystkie jakie są w zakładkach. Używam toggle. Jak się odnieść do konkretnego dropdowna? Wszystkie mają tą samą klasę.

$('.btn-drop').click(function(){
        $('.drop-ul').toggleClass('show-drop-ul');
      });

      $('.btn-drop-sub').click(function(){
        $('.sub-drop-ul').toggleClass('show-sub-drop-ul');
      });

Pierwszy otwiera mi dropdowny pierwszego poziomu.

Btn-drop-sub otwiera mi drugiego poziomu. Ma ktoś jakiś pomysł? Rozumiem dlaczego otwiera wszystkie ale nie wiem jak odnosić się tylko do tego który znajduje się pod przyciskiem otwierania

 

<a class="side-menu-a" href="">Zakladka</a>
	<span role="button" class="btn-drop glyphicon glyphicon-chevron-down"></span>
</a>
	<ul class="drop-ul">
             <li><a href="">Podzakladka</a></li>
        </ul>

 

Problem rozwiązany