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'
}

如何使隐藏的下拉菜单保持打开状态？

1 个答案: