javascript - 使用 javascript 在点击时显示移动导航

Question

我正在尝试在使用 javascript 单击汉堡图标时显示移动菜单，但似乎无法使其正常工作。有人可以帮忙吗？我附上了下面的代码，目前菜单由于转换属性而隐藏在屏幕右侧，但是当我单击汉堡图标时，我想显示它。问题是否在于调用附加到父元素的 css 属性？

HTML

<header>
    <a href="/stjohnschurch" class="nav-brand">
        <img src="http://dev.righthookstudio.co.uk/stjohnschurch/wp-content/uploads/2020/05/St-Johns-Church.png" alt="st johns logo">
    </a>
    <nav>

    <?php wp_nav_menu(
         array (
            'theme_location' => 'primary-navigation',
            'menu_class' => 'primary-navigation'
        )
    );?>
    <div class="burger">
        <div class="line1"></div>
            <div class="line2"></div>
                <div class="line3"></div>
    </div>
    </nav>
</div>

CSS

@media (max-width: 991.98px) {
body {
    overflow: hidden;
}
header .primary-navigation {
    position: absolute;
    height: 100vh;
    top: 8vh;
    right: 0;
    z-index: 999;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5 ease-in;
}
header .primary-navigation li {
    opacity: 0;
}
.burger {
    display: block;
}
.nav-active {
    transform: translateX(0%);
}}

Javascript

const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('header > .primary-navigation');

burger.addEventListener('click', ()=>{
    nav.classList.toggle('nav-active');
}); } navSlide()

标签： javascriptphphtmljquerycss