当我悬停父元素时，他的 child 出现了。当我单击父元素时，他的 child 也会出现，当我再次单击它时，他的 child 会消失。但是然后(在单击消失的子元素的父元素之后)当我将鼠标悬停在父元素上时，他的 child 没有出现。为什么？
var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');
parent.addEventListener('click', function () {
if (children.style.display == 'block') {
children.style.display = 'none';
} else {
children.style.display = 'block';
}
});nav > ul > li > ul {
display: none;
}
nav > ul > li:hover ul {
display: block;
}
li {
width: max-content;
}
ul {
padding: 0px;
} <body>
<nav>
<ul>
<li><a href="#">Parent</a>
<ul>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
</ul>
</li>
</ul>
</nav>
</body>谢谢。
最佳答案
单击父类时更容易切换类。
var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');
parent.addEventListener('click', function() {
children.classList.toggle("showIt");
});nav>ul>li>ul {
display: none;
}
nav>ul>li:hover ul {
display: block;
}
li {
width: max-content;
}
ul {
padding: 0px;
}
.showIt {
display: block;
}<body>
<nav>
<ul>
<li><a href="#">Parent</a>
<ul>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
</ul>
</li>
</ul>
</nav>
</body>关于javascript - 如何添加:hover and click event to element same time?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52121125/