我正在尝试使模式菜单在您单击菜单时关闭,但是当我添加带有window.onclick
的event.target != nav
函数时(导航是菜单),导航内的子元素(菜单选项)不受功能影响,菜单关闭。
<nav>
<img src="/Images/ham.png" alt="toggle menu" class="menu" id="menu">
</a>
<div>
<ul class="show-desktop hide-mobile" id="nav">
<li id="exit" class="exit-btn hide-desktop">
<img src="/Images/exit.svg" alt="exit menu">
</li>
<li><a href="index.html">home</a></li>
<li><a href="work.html">work</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</nav>
我已经尝试将具有id的div添加到元素列表中,并将单个id添加到每个选项元素(索引,工作,关于,联系),并添加连续的window.onclick
函数以匹配每个元素,但是它仅适用于1个元素,并非全部适用于4个元素。
<script>
var menu = document.getElementById('menu');
var nav = document.getElementById('nav');
var exit = document.getElementById('exit');
menu.addEventListener('click', function(e) {
nav.classList.toggle('hide-mobile');
e.preventDefault();
e.stopPropagation();
});
exit.addEventListener('click', function(e) {
nav.classList.add('hide-mobile');
e.preventDefault();
});
window.onclick = function(event) {
if (event.target != nav){
nav.classList.add('hide-mobile');
event.preventDefault();
}}
</script>
我想要得到的是ul类(id = nav)的子元素,它们可以用作链接而不是关闭菜单。
[一种可能的方法,也是我通常使用的一种方法,而是使用宽度和高度为100%的[