Rozwijane menu jquery

Cześć,

Na początku zaznaczę, że dopiero sie uczę i za wszystkie głupie pytania przepraszam.

Mój problem jest następujący. Chciałabym aby po przejściu na podstorne część menu z której została wybrana podstrona zostało rozwinięte.

 <nav id="sidebar">


            <ul class="list-unstyled components">

                <li class="has-menu">
                    <a>menu</a>
                      <div class="arrow"></div>

                </li>

                <ul class="list-unstyled sub-menu">
                    <li class = "active"><a href="sub-menu.html">sub-menu</a></li>
                    <li><a href="#"><span>sub-menu</span></a></li>
                    <li><a href="#">sub-menu</a></li>
                    <li><a href="#">sub-menu</a></li>
                    <li><a href="#t">sub-menu</a></li>
                    <li><a href="#">sub-menu</a></li>
                </ul>


                <li class="has-menu">
                    <a href="#menu">menu</a>
                      <div class="arrow"></div>


                </li>
                <ul class="list-unstyled sub-menu">
                    <li data-menuEid="Menu012"><a><span>sub-menu</span></a></li>
                    <li data-menuEid="Menu013"><a><span>sub-menu</span></a></li>
                    <li data-menuEid="Menu014"><a><span>sub-menu</span></a></li>
                    <li data-menuEid="Menu015"><a><span>sub-menu</span></a></li>
                </ul>
                <li class="has-menu">
                    <a>menu</a>
                      <div class="arrow"></div>
                </li>
                <ul class="list-unstyled sub-menu">
                    <li data-menuEid="Menu016"><a><span>sub-menu</span></a></li>
                    <li data-menuEid="Menu017"><a><span>sub-menu</span></a></li>
                    <li data-menuEid="Menu018"><a><span>sub-menu</span></a></li>
                    <li data-menuEid="Menu019"><a><span>sub-menu</span></a></li>
                </ul>
            </ul>

        </nav>


<script>if ($('li').hasClass('active')) {

         $(this).find('.sub-menu').toggle();
       

     }

</script>

Jedyne co udało mi się osiągnąć to to że otwierają się wsyztskie sub-menu, kiedy próbuję z innymi selektorami to nie dzieje się nic.

Czy ktoś mógłby mi pomóc i naprowadzić gdzie jest błąd, czego szukać ?

Sugerowałabym, żeby to przełączenie zrobić jednak po stronie serwera, skoro i tak ustawiasz tam class="active", ale jeśli koniecznie musisz, to:

document.querySelector("li.active").parentElement.style.color="red";

Czy inne tam (...).dislplay="block"; ew. (...)..toggle();

Struktura menu jest niepoprawna. Zagnieżdżenie list jest nieprawidłowe. Pomiędzy znacznikami listy mogą znajdować się tylko jej items i dopiero w nich zagnieżdżamy kolejną listę. ul - html