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

【问题标题】：Toggling burger menu on one pager after click单击后在一个寻呼机上切换汉堡菜单
【发布时间】：2018-05-17 00:42:45
【问题描述】：

如何让我的单页汉堡菜单在点击#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>

【问题讨论】：

标签： javascript html css menu

【解决方案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>

【讨论】：

我进行了建议的更改，现在汉堡中的酒吧正在以正确的方式更改（太好了）。但是单击href时菜单仍然没有切换:(
看我提供的代码sn-p。您还需要切换复选框checked 属性。