单击后在一个寻呼机上切换汉堡菜单

Question

点击#div / href后如何让我的单页汉堡菜单切换？ 切换功能在单击实际汉堡“条形”时工作正常，但在单击一个menupoint时不切换。

汉堡菜单是用和输入复选框和几乎纯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

您需要将事件侦听器附加到需要切换的每个项目。

＆＃13;

＆＃13;

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')
    }
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;