Question

很难解释我的要求。因此，我将逐步使用一些快照对其进行解释。

最初，当我加载页面时，页面看起来像这样：

如果我点击Python Basics和Python Advanced链接，它将看起来像这样：

如果我选择类似Python Variables的链接[见上图]，则会显示：

如您所见，我在Python Variables页中，并且下拉菜单已折叠，这不是我想要的，我希望单击Python Variables链接后看起来像这样：

我的意思是，即使单击新链接后，我也希望它在新页面中保留以前的展开下拉菜单。这有可能实现吗？我该怎么做？

This link确切显示了当我单击侧边栏链接上的新链接时，我希望边栏的外观是什么？

这是侧栏的代码：

<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()
  }
}

这就是全部。

我不知道这是否是一种标准方法，但是它可以正常工作并使我感到高兴。如果您有更好的解决方案，我真的很想听听您的意见。谢谢。

如何在新的新页面中保留展开的下拉菜单？

1 个答案: