Переключение меню бургера на одном пейджере после клика

Question

Как мне сделать так, чтобы меню моего пейджерного бургера переключалось после нажатия на # div / href? Функция переключения отлично работает при щелчке по фактическим «барам» бургера, но не переключается при нажатии на пункт меню.

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

function functionBurger(x) {
    x.classList.toggle("change");
}

.container {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
/* NAV  TOGGLE */

label {
    cursor: pointer;
}

#menu-toggle {
    display: none;
    /* hide the checkbox */
}

#menu {
    display: none;
}

#menu-toggle:checked + #menu {
    display: block;
}

<div class="test">
    <div class="left"></div>
    <label for="menu-toggle">
        <div class="burger_menu">
            <div class="container" onclick="functionBurger(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        </div>
    </label>
    <input type="checkbox" id="menu-toggle" />
    <ul id="menu">
        <li><a href="#hjem_container">HJEM</a></li>
        <li><a href="#room_container">ROOMS</a></li>
        <li><a href="#book_container">BOOK</a></li>
        <li><a href="#kontakt_container">KONTAKT</a></li>
        <li><a href="#gavekort_container">GAVEKORT</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a class="english" href="#">In English</a></li>
    </ul>
</div>

Answer 1

Вам необходимо прикрепить прослушиватель событий к каждому элементу, который нужно переключить.

function functionBurger(x) {
    x.classList.toggle("change");
}

document.querySelectorAll('#menu a').forEach(function(item) {
    item.onclick = function () {
        document.getElementById('menu-toggle').checked = !document.getElementById('menu-toggle').checked
        document.querySelector('.burger_menu .container').classList.toggle('change')
    }
})

.container {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
/* NAV  TOGGLE */

label {
    cursor: pointer;
}

#menu-toggle {
    display: none;
    /* hide the checkbox */
}

#menu {
    display: none;
}

#menu-toggle:checked + #menu {
    display: block;
}

<div class="test">
    <div class="left"></div>
    <label for="menu-toggle">
        <div class="burger_menu">
            <div class="container" onclick="functionBurger(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        </div>
    </label>
    <input type="checkbox" id="menu-toggle" />
    <ul id="menu">
        <li><a href="#hjem_container">HJEM</a></li>
        <li><a href="#room_container">ROOMS</a></li>
        <li><a href="#book_container">BOOK</a></li>
        <li><a href="#kontakt_container">KONTAKT</a></li>
        <li><a href="#gavekort_container">GAVEKORT</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a class="english" href="#">In English</a></li>
    </ul>
</div>