[英]Modal menu links dont work when click outside modal menu to close function is active
我嘗試在單擊外部時要關閉一個模態菜單,但是當event.target != nav
添加window.onclick
) 不受 function 影響並且菜單關閉。
<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>
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;
}
nav ul li a {
color: white;
text-decoration: none;
display: block;
width: 100%;
padding: 1em 2em;
background-color: rgb(49, 55, 59);
text-transform: uppercase;
font-weight: bold;
}
nav ul li a:hover {
background-color: rgb(65, 73, 78);
}
我想要得到的是 ul class (id=nav) 的子元素作為鏈接而不是關閉菜單。
一種可能的方法,也是我通常使用的方法,是在模態下方設置一個寬度和高度為 100% 的覆蓋 div,並將 onclick 處理程序添加到該覆蓋,而不是 window ZA8CFDE6331BD4B62AC96F8911。 只有當模態本身可見時,該覆蓋才可見,否則不可見,使用指針事件:無。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.