当我在它外面单击时无法关闭模式

Question

我正在构建我的第一个网站，在使用javascript关闭外部模式(nav(时遇到了问题。

HTML:

<nav>
<img src="/Images/ham.png" alt="toggle menu" class="menu" id="menu"> 
</a>

<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>
</nav>

Javascript：

<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();
});
exit.addEventListener('click', function(e) {
nav.classList.add('hide-mobile');
e.preventDefault();
});

window.onclick = function(event) {
if (event.target == nav) {
nav.classList.toggle('hide-mobile');
e.preventDefault();
}
else if (event.target != nav){
nav.classlist.add('hide-mobile');
e.preventDefault();
}
}
</script>

CSS：

.hide-mobile{
right: -400px;
transition: linear .5s;
}
nav ul {
position: fixed;
width: 60%;
top: 0;
right: 0;
text-align: left;
background: rgb(36,41,44);
height: 100%;
z-index: 7;
padding-top: 3em;
right: 0px;
transition: ease-out .5s;
}

我从教程中获得了第一组javascript代码(菜单和退出按钮函数(，现在我正试图添加关闭外部点击函数。我添加了一个window.onclick功能，当点击导航时显示导航模式，当点击外部导航时隐藏它，但当我点击外部导航后它不会关闭。你知道我做错了什么吗？谢谢

Answer 1

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();
}
}

这可以用你的方式解决你的问题。

Answer 2

在window.onclick函数中，您应该检查是否为模态打开？当模态处于活动状态时，您可以添加一个特定的类，如果它处于活动状态，您可以关闭它