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

Question

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

这里是导航汉堡对应的HTML：

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

这是相关的 CSS（注意：在我的 HTML 中没有一个元素的 class 为 '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();

Answer 1

你好这个问题的潜在观众，我设法解决了我自己的问题。似乎 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();

我偶然发现了这个解决方案。在为移动视图处理其他一些事情时，我注意到当我从全屏转到 window 更小到接近移动视图的东西时，导航选项会出现并从屏幕上滑出，按照指示去做通过问题 CSS 中的 translateX 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%);
    }

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

Code corresponding to navbar slider in mobile-view isn't working as intended

html

javascript

css

nav