Как сохранить раскрывающееся раскрывающееся меню на новой свежей странице?

Question

Немного сложно объяснить, о чем я спрашиваю.Итак, я объясняю это с помощью некоторого снимка шаг за шагом.

Первоначально, когда я загружаю страницу, страница выглядит следующим образом:

Если я нажму на ссылки Python Basics и Python Advanced, это будет выглядеть так:

Если я выберу ссылку, например Python Variables [см. выше рис.] это будет отображаться:

, как вы можете видеть, я на странице Python Variables, и раскрывающиеся меню свернуты, то естьне то, что я хочу, я хочу, чтобы это выглядело так после нажатия Python Variables ссылки:

Я имею в виду, даже после нажатия новой ссылки я хочу этосохранить предыдущее раскрытое раскрывающееся меню на новой странице.Можно ли этого достичь?Как мне это сделать?

Эта ссылка показывает, как именно я хочу, чтобы моя боковая панель выглядела, когда я нажимаю новую ссылку на ссылках боковой панели?

Это код боковой панели:

<div class="sidenav">
        {% for sub_cat in sub_cats %}
                <button class="dropdown-btn"> {{ sub_cat.sub_cat_title }} 
                        <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-container">
                        {% for subsub_cat in sub_cat.subsubcategory_set.all %}
                            {% url 'tutorials:tutorials' subsub_cat.subsub_cat_parent.sub_cat_parent.cat_slug subsub_cat.subsub_cat_parent.sub_cat_slug subsub_cat.subsub_cat_slug as tutorial_link %}

                            <a href="{{ tutorial_link }}" class="dropLink {% if request.path == tutorial_link %}working{% endif %}" >{{ subsub_cat.subsub_cat_title }}</a>
                        {% endfor %}
                </div>
        {% endfor %}
</div>

и приведенные ниже коды связаны с кодом Javascript:

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var dropdownContent = this.nextElementSibling;

        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
}

Пожалуйста, помогите мне решить эту проблему, спасибо.

Answer 1

Я только что предложил подход, и он работал нормально. Вот что я сделал:

Решение:

активная ссылка имеет класс working, если я нажму на любую ссылку на боковой панели, она примет working класс CSS. Как заявлено здесь {% if request.path == tutorial_link %}working{% endif %} &

.working{
    background-color: #ccc;
}

Я использовал этот класс CSS в качестве средства, чтобы добраться до родителя, и добавил к нему working класс, чтобы добраться до своей цели:

let sub_cat = document.getElementsByClassName('dropLink');

for (i = 0 ; i < sub_cat.length; i++){
  if (sub_cat[i].classList.contains('working')){
    x = sub_cat[i]

    elem = x.parentElement.previousElementSibling 
    elem.classList.toggle('working');

    elem.click()
  }
}

Это все, что нужно.

Я не знаю, является ли это стандартным подходом, но он работал нормально и сделал меня счастливым. Если у вас есть лучшие решения, я бы очень хотел услышать это от вас. Благодарю.