How to make a menu with position saving?

Question

JavaScript

There is a menu in which sub-categories. I select a sub category, go through it, but the menu does not save the expand position. It saves if you add the class <ul id="cat_4" class="opened">. How can I make it so that when I fall into any menu, the position of the open menu is saved?

<ul>
            <li>
              <button id="cat_but_4" onclick="$('#cat_4').toggle(0,$('#cat_but_4').toggleClass('opened'))"  class="opened"></button>
              <a href="/services/category/4" class="a-current a-active">Студия волос</a>
              <ul id="cat_4"  class="opened">
                <li><span class="outed">•</span> <a href="/services/5" class="a-current">Мастерская точной стрижки Fudge, Гаруса и Лондонской Академии Vidal Sassoon</a></li>
                <li><span class="outed">•</span> <a href="/services/6">Лечебные стрижки</a></li>
                <li><span class="outed">•</span> <a href="/services/7">Колористика класса люкс: все виды окрашивания, мелирования, тонирования от Fudge</a></li>
                <li><span class="outed">•</span> <a href="/services/29">Аппаратные нанотехнологии</a></li>
                <li><span class="outed">•</span> <a href="/services/157">Brazilian Blowout — аминокислотное выпрямление и уход за волосами</a></li>
                <li><span class="outed">•</span> <a href="/services/12">Имидж-студия</a></li>
                <li><span class="outed">•</span> <a href="/services/191">Химическая завивка</a></li>
                <li><span class="outed">•</span> <a href="/services/161">Наши клиенты о Fudge</a></li>
                <li><span class="outed">•</span> <a href="/services/13">Вечерние прически</a></li>
                <li><span class="outed">•</span> <a href="/services/192">Долговременная укладка волос — карвинг</a></li>
                <li><span class="outed">•</span> <a href="/services/193">Биозавивка волос</a></li>
                <li><span class="outed">•</span> <a href="/services/221">BOOST UP</a></li>
                <li><span class="outed">•</span> <a href="/services/220">Безсульфатные шампуни</a></li>
              </ul>
            </li>
            <li>
              <button id="cat_but_16" onclick="$('#cat_16').toggle(0,$('#cat_but_16').toggleClass('opened'))" ></button>
              <a href="/services/category/16">Волновая методика лечения волос и кожи головы</a>
              <ul id="cat_16" >
                <li><span class="outed">•</span> <a href="/services/125">Fudge Head SPA — австралийская технология в лечении волос</a></li>
                <li><span class="outed">•</span> <a href="/services/177">Head SPA SUI — японская технология в лечении волос</a></li>
                <li><span class="outed">•</span> <a href="/services/200"> Новая эра в уходе за инсточенными и редеющими волосами - NIOXIN</a></li>
              </ul>
            </li>

Answer 1

You can execute $('.a-current').parent().addClass('opened'); after loading the page.