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

Question

我有一个下拉列表，里面有<a>标记。默认情况下为hidden，下拉列表旁边还有一个插入符号，当下拉列表打开时，该插入符号会向下旋转。现在我想要的是，当我点击下拉列表并点击其中的一个元素时，下拉列表应该保持打开状态(插入符号向下(，并且元素应该在下一页中保持选中状态(如果可能的话(。我真的不想在这个例子中使用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;}

当点击客户端时显示下拉菜单的JavaScript，并且一次只打开一个下拉菜单

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
var indexOfSelectedElement = window.location.pathname;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;

Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
//hide the nonclicked 
if (el !== dropdownContent) {
el.style.display = 'none';
}
});
if (dropdownContent.style.display === "block") 
dropdownContent.style.display = "none";
else
dropdownContent.style.display = "block";
});
}
//get the three Dropdowns
const dropdowns = document.querySelectorAll(".dropdownSideBar");
dropdowns.forEach(el => {
const button = el.querySelector(".dropdown-btn");
button.addEventListener("click", () => {
const caret = document.getElementById('caret');
// Close all
[...dropdowns].filter(x => x != el).forEach(el => el.classList.remove("is-open"));
// Toggle one
el.classList.toggle("is-open");
});
});

演示：https://jsfiddle.net/dgLfjxn2/更新：我试图用URL来解决这个问题，我面临的问题是插入符号没有旋转，当我单击客户端时，会应用after选择器。仍然没有选择任何元素。

var menu = document.getElementById('dropdown-menu');
var client = document.getElementById('clientButton');
var id = indexOfSelectedElement.substr(14, indexOfSelectedElement.lastIndexOf('/') - 14);
if(indexOfSelectedElement.substr(0, 14) === "/fleet/client/") {
menu.style.display = 'block';
menu.style.backgroundColor = '#575757';
client.style.backgroundColor = '#575757';
client.style.color = 'white';
//TODO: keep the clicked client selected on the redirected page?, rotate the caret, when client is clicked again backgroundColor and caret are in the after selector.
}

Answer 1

您应该将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>

在/destination/页面中，您应该包括css和javascript代码以及以下内容：

var url_string = window.location.href;   // get the url
var url = new URL(url_string);
var menuItem = url.searchParams.get("item"); // get item parameter value
// get the dom object of the anchor clicked in previous page
var a = document.querySelector('#' + menuItem);
// find and click related button this should open dropdown menu and rotate caret
a.closest('dropdownsidebar').querySelector('button').click();
// Finally add class to style selected menu item
a.className += " item-selected";

例如：

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