好的,这个问题起初听起来很奇怪,但并不是那么糟糕。我想要一个带有多个子菜单的垂直菜单。我首先尝试使用CSS和复选框,因为我想点击菜单显示子菜单而不是悬停。没有找到正确的解决方案。现在我在w3上找到了一些东西,但它仍然不起作用,因为我打算工作。子菜单会在单击时打开,但如果我单击另一个具有相同脚本(但不同的类和ID)的按钮,它们都会保持打开状态。 (如果你先打开底部,另一个让它关闭,但它只发生在底部..)https://jsfiddle.net/8vsbe5w3/
HTML
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Dropdown</button>
<div id="myDropdown2" class="dropdown-content2">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* ---------------------------------------------------------- */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
CSS
.dropdown-content, .dropdown-content2{
display: none;}
.show {display: block;}
我的理想菜单只允许您打开一个子菜单,如果再次单击它,则允许关闭它(取消选中输入)。
您将window.onclick
属性设置两次,因此您将覆盖第一个属性。这就是为什么当你打开第一个菜单然后第二个菜单时,第一个菜单保持打开 - 因为第一个window.onclick
不再存在了。
我的建议是重构代码,这样你只有一个window.onclick
处理程序,它可以在两个菜单中普遍使用。
另外,覆盖这个事件处理程序是个坏主意,最好使用qazxsw poi。
document.addEventListener()
on-event attribute
的onclick = “namedFunction()”
<button
></button>
.addEventListener()
document.querySelector("button").onclick = namedFunction
document.querySelector("button").addEventListener("click", namedFunction)
。所描述的编程模式是event.target
的主要部分。
Event Delegation
const main = document.querySelector('main');
main.onclick = ddAccordion;
function ddAccordion(e) {
const clicked = e.target;
const triggers = document.querySelectorAll('.trigger');
if (clicked.matches('.trigger')) {
if (clicked.matches('.show')) {
for (let t of triggers) {
t.classList.remove('show');
}
} else {
for (let t of triggers) {
t.classList.remove('show');
}
clicked.classList.add('show');
}
}
return false;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
.trigger {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width: 100%;
}
.trigger:hover,
.trigger:focus {
background-color: #2980B9;
outline: 0;
}
.dropdown {
width: 100%;
}
.content {
background-color: #f1f1f1;
max-height: 0px;
overflow: hidden;
transition: max-height 0.75s ease 0s;
}
.show+.content {
max-height: 500px;
height: auto;
overflow: auto;
transition: max-height 1.15s ease 0s;
}
.content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.content a:hover {
background-color: #ddd;
}