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

}());