我想通过单击链接或单击菜单外部来关闭菜单。为了让事情变得美好和轻松，我不想使用 jQuery。
我该怎么做？
<nav class="nav">
<div class="nav__left">
<h3><a href="#home">DenisMasot</a></h3>
</div>
<input type="checkbox" /><label class="burger" for="nav"></label>
<ul class="nav__right">
<li class="active">
<h3><a href="#home">home</a></h3>
</li>
<li>
<h3><a href="#about">À propos</a></h3>
</li>
<li>
<h3><a href="#production">Réalisation</a></h3>
</li>
<li>
<h3><a href="#contact">Contact</a></h3>
</li>
</ul>
</nav>
可以使用 DOM API 来完成添加事件监听器()在文档上。然后，您需要逻辑来查找点击目标是否位于菜单或其任何元素上，或者页面上的其他位置。
isDescendent()借自如何在 Javascript 中检查一个元素是否包含在另一个元素中
然后可以隐藏菜单element.style.display = 'none'
我会质疑不使用 jQuery 的动机，从长远来看，你将为自己做更多的工作......
var menu = document.querySelector("nav.nav");
var checkbox = document.querySelector("input[type=checkbox]");
document.addEventListener("click", function(e) {
if (menu != e.target &&
! isDescendant(menu, e.target)) {
console.log("Clicked somewhere else");
menu.style.display = 'none';
checkbox.checked = false;
}
}, false);
function isDescendant(parent, child) {
var node = child.parentNode;
while (node != null) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
}
<div>
Rest of page...
</div>
<nav class="nav">
<div class="nav__left">
<h3><a href="#home">DenisMasot</a></h3>
</div>
<input type="checkbox" /><label class="burger" for="nav"></label>
<ul class="nav__right">
<li class="active">
<h3><a href="#home">home</a></h3>
</li>
<li>
<h3><a href="#about">À propos</a></h3>
</li>
<li>
<h3><a href="#production">Réalisation</a></h3>
</li>
<li>
<h3><a href="#contact">Contact</a></h3>
</li>
</ul>
</nav>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
