当在外部模式菜单上单击以关闭功能时,模式菜单链接不起作用

问题描述 投票:0回答:1

我正在尝试使模式菜单在您单击菜单时关闭,但是当我添加带有window.onclickevent.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)的子元素,它们可以用作链接而不是关闭菜单。

javascript html css modal-dialog
1个回答
0
投票

[一种可能的方法,也是我通常使用的一种方法,而是使用宽度和高度为100%的[>模态,然后将onclick处理程序添加到该叠加层而不是窗口对象。仅当模态本身可见时,该覆盖层才可见;否则,在指针事件:无时,该覆盖层不可见。

© www.soinside.com 2019 - 2024. All rights reserved.