与移动视图中导航栏滑块对应的代码未按预期工作

如何解决与移动视图中导航栏滑块对应的代码未按预期工作

我目前正在为移动视口编写导航栏。我进行了一些搜索，我以为我有一个解决方案，但结果发现该解决方案根本不起作用。我试图做到这样，当点击/点击导航栏中的导航汉堡时，导航选项会从右向左滑入屏幕。我不确定逻辑错误在哪里，或者为什么点击的导航汉堡没有响应事件。

这是导航汉堡对应的HTML：

<div id="nav-burger">
    <div id="option-1"></div>
    <div id="option-2"></div>
    <div id="option-3"></div>
</div>

这是相关的 CSS（注意：在我的 HTML 中没有任何地方有一个带有“nav-active”类的元素 - 如果这是相关的）：

    #nav-title a {
        flex: 1;
        text-align: center;
        line-height: 2.5;
    }

    #nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: #404040;
        position: absolute;
        top: 40px;
        height: 40vh;
        width: 100%;
        transform: translateX(100%);
        transition: transform 1s ease-in;
    }

    .nav-active {
        transform: translateX(0%);
    }

最后，这是我目前的 JS 代码：

const navSlider = function() {
    const navBurger = document.querySelector('#nav-burger');
    const nav = document.querySelector('#nav-links');

    navBurger.addEventListener('click',function() {
            nav.classList.toggle('nav-active');
        });
}

navSlider();

解决方法

您好，问题的潜在观众，我设法解决了我自己的问题。似乎 JS 需要填写一点，当我进行这些更改时，我让脚本开始工作：

const navSlider = function() {
    const navBurger = document.querySelector('#nav-burger');
    let nav = document.querySelector('#nav-links');

    navBurger.addEventListener('click',function() {
            nav.classList.toggle('nav-active');

            document.getElementById('nav-links').style.transition = "transform 0.9s ease-in";

            if (nav.getAttribute('class') === 'nav-active') {
                nav.style.transform = 'translateX(0%)';
            } else {
                nav.style.transform = 'translateX(100%)';
            }
        });
}

navSlider();

我很偶然地遇到了这个解决方案。在为移动视图处理其他一些事情时，我注意到当我从全屏切换并将窗口缩小到接近移动视图的程度时，导航选项会出现并滑出屏幕，如 translateX CSS 所指示的那样问题的 CSS 中的属性。这让我开始思考 CSS 属性在做什么，以及如何更好地将它们放置在 JS 中。稍后进行一些更改，我有一个可用于移动视图的导航栏滑块！下面是相关 CSS 现在的样子：

    #nav-title a {
        flex: 1;
        text-align: center;
        line-height: 2.5;
    }

    #nav-links {
        display: flex;
        flex-direction: column;
        padding-left: 20%;
        justify-content: space-evenly;
        background-color: #404040;
        border: 1px solid #a1a9fe;
        position: absolute;
        top: 40px;
        height: 40vh;
        width: 100%;
        transform: translateX(100%);
    }