Javascript 如何在下一页打开隐藏的下拉列表？

我有一个下拉列表，里面有

标签。默认情况下，它是隐藏的，下拉列表旁边还有一个插入符号，当下拉列表打开时，该插入符号会向下旋转。现在我想要的是，当我单击下拉列表并单击其中的一个元素时，下拉列表应保持打开状态（插入符号向下），并且该元素应在下一页中保持选中状态（如果可能）。我真的不想在本例中使用

localStorage

或

Sessions

。有人能帮我吗？或者举个例子说明如何做到这一点

<div class="client dropdownSideBar" id="cl">
    <button class="dropdown-btn font_24 font_white">
        CLIENT
    </button>
    <div class="dropdown-container" id="dropdown-menu">
        <a>Element1</a><br>
        <a>Element2</a><br>
    </div>
</div>

/* keep the caret aligned */
#cl .dropdown-btn::before {
    margin-left: 115px;
}
.dropdown-btn::before {
    display: inline-block;
    content: "\25BC"; /* caret content */
    transition: transform 0.3s;
    transform: rotate(270deg);
    float: right;
}
.dropdownSideBar.is-open .dropdown-btn:before {
    transform: rotate(-360deg);
    color: white;
}

.dropdownSideBar.is-open .font_white {
    background-color: #575757;
    width: 100%;
    color: white;
}
.dropdownSideBar.is-open .dropdown-container {
    display: block;
}
/* hidden by default, make the content shifts under the title */
.dropdown-container {
    display: none;
    font-size: 18px;
    padding-top: 10px;
    background-color: #575757;
}
.dropdown-container a {color: white; padding-left: 30px;}
.dropdown-container a:hover {background-color: #414141;}

---

您应该将

href

和

id

添加到您的锚，例如：

<div class="client dropdownSideBar" id="cl">
    <button class="dropdown-btn font_24 font_white">
        CLIENT
    </button>
    <div class="dropdown-container" id="dropdown-menu">
        <a href="/destination/?item=element1" id="element1">Element1</a><br>
        <a href="/destination/?item=element2" id="element2">Element2</a><br>
    </div>
</div>

item-selected {
   background-color: '#575757',
   color: 'white'
}

例如：

<div class="client dropdownSideBar" id="cl">
    <button class="dropdown-btn font_24 font_white">
        CLIENT
    </button>
    <div class="dropdown-container" id="dropdown-menu">
        <a href="/destination/?item=element1" id="element1">Element1</a><br>
        <a href="/destination/?item=element2" id="element2">Element2</a><br>
    </div>
</div>

item-selected {
   background-color: '#575757',
   color: 'white'
}

---

为什么不为此设置一个URL参数？@NicoHaase是的，我已经尝试过了，但实际上没有成功。你打算在哪里使用这种方法？如果您可以共享，其他人可以检查错误localStorage有什么问题？将hrref和id添加到锚定href=“page/？item=element1”id=“element1”很容易使用。在页面中，您应该从location获取项目值，并使用值var a=document.querySelector（“#”+itempar）按id搜索定位点，最后您应该找到并单击相关按钮a.closest（'DropDownBar'）。querySelector（'button'）。单击（），并将类添加到所选样式的定位点

item-selected {
   background-color: '#575757',
   color: 'white'
}