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

}());

这是我一直在研究的Codepen：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);
  });

}());

使用JS和SCSS的导航动画，您能告诉我我要去哪里了吗？

1 个答案: