使用 JS 和 SCSS 的导航动画，你能告诉我哪里出错了吗？答案

【问题标题】：Navigation animation using JS and SCSS, can you tell me where I'm going wrong?使用 JS 和 SCSS 的导航动画，你能告诉我哪里出错了吗？
【发布时间】：2019-08-02 14:21:41
【问题描述】：

我正在尝试创建一个包含 2 个元素（左和右）的导航。我希望这两个元素从它们各自的屏幕边缘移入，在中间相遇以创建全屏导航。谁能阐明我哪里出错了？

到目前为止，我已经设法让每个盒子单独移动，但不能同时移动。我在他们的导航类中给了他们两个单独的 ID，认为这将允许我在调用切换“扩展”的函数时以不同的方式操纵他们的定位，但这又不起作用。

这是我的 HTML 结构：

<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav id="left" class="nav">
</nav>
<nav id="right" class="nav">
<ul>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</nav>

这是我的 SCSS 的一部分：

.nav {  
background: $nav-background;
color: $nav-color;
cursor: pointer;
font-size: 2rem;
height: 100vh;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: $nav-width;
z-index: $z-nav;
ul {
    @include center-vertically;
    list-style: none;
    margin: 0;
    padding: 0;
} 
}
#right{
@include transition(right 0.5s ease);
right: -$nav-width;
&.expanded { right: 0; }
}
#left{
@include transition(left 0.5s ease);
left: -$nav-width;
&.expanded { left: 0; }
}

这是我的 JS：

(function() {

var hamburger = {
    navToggle: document.querySelector('.nav-toggle'),
    nav: document.querySelector('nav'),

    doToggle: function(e) {
        e.preventDefault();
        this.navToggle.classList.toggle('expanded');
        this.nav.classList.toggle('expanded');
    }
};

hamburger.navToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });

}());

这是我一直在研究的代码笔：https://codepen.io/matthewoproctor/pen/YmxZPQ

提前感谢您的帮助。

【问题讨论】：

标签： javascript html css sass

【解决方案1】：

您使用两个 ID 和共享类名的方法非常完美，您的 SCSS 也是如此。这里的问题其实很简单：hamburger.nav 使用的是document.querySelector，它只选择了nav 类的第一个元素。相反，您应该使用document.querySelectorAll。然后，您只需调整 doToggle 函数以循环使用 nav 类的所有元素。

(function() {

    var hamburger = {
        navToggle: document.querySelector('.nav-toggle'),
        nav: document.querySelectorAll('nav'),

        doToggle: function(e) {
            e.preventDefault();
            this.navToggle.classList.toggle('expanded');
            this.nav.forEach(n => n.classList.toggle('expanded'));
        }
    };

    hamburger.navToggle.addEventListener('click', function(e) {
    hamburger.doToggle(e);
  });

}());

【讨论】：