Ссылки модального меню не работают, если щелкнуть за пределами модального меню, чтобы закрыть функцию активна - PullRequest
Новая
       24

Ссылки модального меню не работают, если щелкнуть за пределами модального меню, чтобы закрыть функцию активна

0 голосов
/ 26 апреля 2020

Я пытаюсь создать модальное меню, которое закрывается, когда вы щелкаете за его пределами, но когда я добавляю функцию window.onclick с event.target != nav (nav - это меню), дочерние элементы внутри 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>

Я попытался добавить div с идентификатором в список элементов, а также индивидуальный идентификатор для каждого из элементов option (index, work, about, contact) и добавление последовательных 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 (id = nav) для работы в качестве ссылок вместо закрытия меню.

1 Ответ

0 голосов
/ 26 апреля 2020

Один из возможных подходов, который я обычно использовал, состоит в том, чтобы вместо этого иметь наложение div с шириной и высотой 100% под модальным и добавить обработчик onclick к этому наложению вместо окна объект. Это наложение должно быть видимым, только если сам модал видим, а в остальном невидим, с указателями-событиями: нет.

...