当我将父元素悬停时,他的孩子就出现了。当我点击父元素时,他的孩子也会出现,当我再次点击它时,他的孩子就会消失。但是当我将父元素悬停在他的孩子没有出现时,(在点击消失的孩子的父元素之后)。为什么?
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>
谢谢。
您可以通过将children.style.display
设置为空字符串而不是在要隐藏子项时为其分配none
来轻松避免这种情况。
编辑:
需要更正:而不是未定义,需要将空字符串分配给children.style.display
以删除覆盖(请参阅斜体标记的文本 - 我必须更正)。
代码段应如下所示:
var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');
parent.addEventListener('click', function () {
alert(children.style.display);
if (children.style.display == 'block') {
children.style.display = '';
} else {
children.style.display = 'block';
}
}, true);
单击父级时,更容易切换类。
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>
使用基本的编程组合
$('#target').on('click mouseover', function () {
// Do something for both
});