当我点击它外部时无法关闭模式答案

【问题标题】：Can't close modal when I click outside of it当我点击它外部时无法关闭模式
【发布时间】：2024-04-15 00:45:02
【问题描述】：

我正在构建我的第一个网站，但在使用 javascript 关闭模式（导航）之外的点击时遇到问题。

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 函数，以在单击导航时显示导航模式，并在单击外部导航时隐藏它，但当我单击外部导航时它不会关闭。关于我做错了什么的任何想法？谢谢。

【问题讨论】：

在文档本身上添加一个点击监听器，当这个点击被调度时检查目标（已经被点击的元素）是否不是菜单

标签： javascript html css modal-dialog

【解决方案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();
    }
}

这可以解决你的问题。

【讨论】：

我试过了，但是菜单根本打不开。
好的，我需要添加 e.stopPropagation();在菜单下也没有意识到这一点。非常感谢。

【解决方案2】：

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

【讨论】：