我恳请您提供帮助,我希望子菜单可以在与垂直下拉菜单重叠的同一屏幕中的幻灯片中打开,因为我要插入很多行和子菜单,并使用“后退”按钮返回子菜单当它们重叠时。
它们不必像现在这样或侧向打开级联,但是当我单击car时,子菜单必须与主菜单完全重叠,然后使用返回按钮在菜单go中返回,是否可以? 后退按钮对我不起作用。
我希望子菜单打开页面,然后彼此重叠,并使用“后退”按钮返回菜单
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";
}
});
}
.sidenav {
height: 250px;
width: 300px;
z-index: 1;
top: 200px;
left: 0;
background-color: #444;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a,.dropdown-btn {
padding: 14px 8px 6px 16px;
text-decoration: none;
font-size: 17px;
color: #8c8c8c;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
margin-left: 2px;
}
.sidenav a:hover,.dropdown-btn:hover {
color: #f1f1f1;
background: #555;
border-left: 3px solid #f1d120;
margin-left: -1px;
}
.main {
margin-top: -460px;
margin-left: 310px;
font-size: 20px;
padding: 10px 50px;
}
.active {
background-color: grey;
color: white;
}
.dropdown-container {
display: none;
background-color: #4c4c4c;
padding-left: 8px;
}
<div class="sidenav"><a href="">Brand</a> <button class="dropdown-btn">Car <strong>
</strong> </button>
<div class="dropdown-container"><a href="">° renault</a> <a href="">° citoren</a></div>
<br /><br /><br />
<button>back</button>