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

Question

我正在尝试创建一个包含 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

在此先感谢您的帮助。

Answer 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);
  });

}());