javascript - 如何在单击下拉 btn 链接下一页时保持显示下拉容器（列出项目）

Question

谢谢；我是高级 JavaScript 和 jQuery 的新手，但我尝试了尽可能多的我也可以在 google 上，但我做不到，请任何人都可以分享当单击内部下拉按钮到下一页时下拉容器如何继续显示，

如果我选择一个下拉容器列表转到下一个 jsp，但该列表是隐藏或关闭的，所以我想显示我将从选定的下拉 btn 切换的项目列表

CSS

.sidenav{
    height:100%;   
    position:fixed;
    width: fit-content;
    font-size: 15px;
    padding: 20px;
    background-color:#111;
    overflow: auto;
    transition:0.1s;
}
.sidenav a{
    padding-left: 20px;
    padding-bottom: 20px;
    text-decoration: none;
    font-size: 18px;
    color: #818181;
    font-size: 15px;
    display: block;
    transition:0.3s;
}
.sidenav a:hover{
    color: #f1f1f1;
}
.sidenav .closebtn {
    position:absolute;
    z-index: 1;
    top:0;
    right:20px;
    font-size:36px;
    margin-left:50px;
}
.dropdown-btn{
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    border: #818181;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
}
.dropdown-btn:hover{
    background-color: lightslategray;
    color: white;
}
#main{
    transition: margin-left .1s;
    padding: 16px;
    top: 0;
    padding-top: 0;

}
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

.dropdown-container {
    display: none;
    background-color: #262626;
    padding-left: 20px;
}

Javascript

document.getElementById("mySidenav").style.width = "290px";
document.getElementById("main").style.marginLeft = "280px";

var dropdown = document.getElementsByClassName("dropdown-btn");
var cc = document.getElementsByClassName("dropdown-container");
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";
            cc.classList.show();
        } else {
            dropdownContent.style.display = "block";
        }
    });
}
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}
function closeNav(){
    document.getElementById("mySidenav").style.width = "50px";
    document.getElementById("main").style.marginLeft= "50px";
}

HTML

<div class="sidenav" id="mySidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="layoutReport.jsp">
        <i class="fa fa-dashboard"></i> <span>Dashboard</span>
    </a>
    <button class="dropdown-btn"> 
        <i class="fa fa-gear"></i> <span> Sales</span> <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-container">
        <a href="">
            <i class="fa fa-circle-o"></i> <span>Sales Chart</span>
        </a>
        <a href="saleinvoice.jsp">
            <i class="fa fa-circle-o"></i> <span>Sales invoice </span>
        </a>
        <a href="">
            <i class="fa fa-circle-o"></i> <span>Sale Payment In</span>
        </a>
        <a href="">
            <i class="fa fa-circle-o"></i> <span>Sale Return</span>
        </a>
        <a href="">
            <i class="fa fa-circle-o"></i> <span>Estimation</span>
        </a>
    </div>
</div>

标签： javascriptjquerycss