Меню гамбургеров из навигационной панели работает только один раз

ProgramBox

Меню гамбургеров из навигационной панели работает только один раз

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

Я создал навигатор со скрытым меню, но кнопки «гамбургер» и «Закрыть» работают только один раз.

Мой вопрос: должен ли я помещать события в функцию и вызывать ее в конце, или, может быть, цикл для событий кнопок? Я не установил непрозрачность для скрытого меню (я где-то это читал), может быть, в этом проблема.

У вас есть какие-либо идеи, почему я не могу использовать событие каждый раз, когда нажимаю на значки?

Спасибо тебе, уууу! 🙂

P.S. Я вижу, что в обрезанном коде, когда ширина меньше 800 пикселей, значок гамбургера не отображается, но в моем браузере работает нормально. 🙂

 "use strict";

const openMenuIcon = document.querySelector(".open-menu");
const burgerMenu = document.querySelector(".burger-menu")
const closeMenuIcon = document.querySelector(".close-menu");


openMenuIcon.addEventListener("click", () => {
    burgerMenu.classList.toggle('active');
});

closeMenuIcon.addEventListener("click", () => {
    burgerMenu.classList.toggle('closed');
});

 *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

nav{
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    background-color: rgb(44, 41, 41);
    color: white;
}

nav .logo{
    display: flex;
    align-items: center;
    margin-left: 20px;
}

nav .burger-menu {
    display: flex;
    list-style: none;
}

nav .burger-menu li a{
    display: inline-block;
    align-items: center;
    padding: 10px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    margin-right: 20px;
    font-size: 1.4rem;
}


nav .burger-menu .close-menu, .icons i{
    display: none;
    cursor: pointer;
}

nav .open-menu{
    font-size: 1.5rem;
    margin: 20px 20px 20px 20px;
    display: none;
    cursor: pointer;
    font-size: 40px;
}


nav .burger-menu li{
    display: flex;
    align-items: center;
}

.fa-facebook:hover {color: rgb(36, 79, 197);}
.fa-instagram:hover {color: rgb(220, 95, 231);}
.fa-youtube:hover {color: rgb(219, 22, 22);}

nav .inside-menu{
    font-size: 1rem;
    margin-left:10%;
    display: none;
    list-style: none;
}

@media all and (max-width: 800px){
    nav .burger-menu{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        font-size: 1.5rem;
        background-color: rgb(44, 41, 41);
        transition: top 1s ease;
        display: none;
        letter-spacing: 1px;
    }

    nav .burger-menu .close-menu{
        display: block;
        position: absolute;
        top: 40px;
        right: 20px;
    }

    nav .open-menu{
        display: flex;
        align-items: center;
        margin-right: 30px;
    }

    nav .burger-menu li a:hover{
        color: orange;
        font-size: 0.8rem;
    }

    .icons i{
        display: inline-block;
        padding: 30px;
    }

    .burger-menu{
        display: none;
    }

    .burger-menu.active {
        display: flex;
    }

    .burger-menu.closed{
        display: none;
    }
}


@media all and (max-width:1100px){
    nav .burger-menu li a{
        padding: 4px;
        font-size: 1.1rem;
        width: 100%;
    }
}

 <nav>
        <div class="logo">
            <img src="https://picsum.photos/100/40" alt="">
        </div>
        <div class="open-menu"><i class="fas fa-bars"></i></div>

        <ul class="burger-menu">
            <li class="acasa"><a href="#">Acasa</a></li>
            <li class="despre"><a href="#">Despre</a></li>
            <li class="galerie"><a href="#">Galerie</a></li>
            <li class="servicii"><a href="#">Servicii</a>
                <ul class="inside-menu">
                    <li><a href="#">Detailing Interior</a></li>
                    <li><a href="#">Detailing Exterior</a></li>
                </ul>
            </li>
            <li class="preturi"><a href="#">Preturi</a></li>
            <li class="contact"><a href="#">Contact</a></li>


            <span class="icons">
                <i class="fab fa-facebook"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-youtube"></i>
            </span>

            <div class="close-menu"><i class="fa fa-times"></i></div>
        </ul>

    </nav>

Ответ №1:

Проблема не в том, что событие не запускается каждый раз — это потому, что у вас есть класс, указывающий, что меню бургеров активно, и класс, указывающий, что оно закрыто, но когда вы его закрываете, вы не удаляете активный класс.

Изменение вашего события закрытия на:

 closeMenuIcon.addEventListener("click", () => {
    burgerMenu.classList.toggle('active');
});

И удаление ссылок на .burger-menu.closed из вашего CSS должно решить проблемы с событием щелчка.

1. Это сработало. Поэтому событие closeMenuIcon просто закрывает скрытое меню. верно?

2. По сути, да — все, что нужно сделать для события закрытия, — это отменить то, что сделало событие открытия. В противном случае вы заканчиваете тем, что одно говорит, что он открыт, а другое говорит, что он закрыт. Пример из реальной жизни: вы не можете открыть дверь, если она уже открыта.

3. Я понял. Спасибо 🙂

Метки: Меню гамбургеров из навигационной панели работает только один раз