单击同级时从导航中删除类

Question

我创建了一个导航，通过添加一个“活动”类来突出显示选择的任何菜单项。如果单击正文，它将从菜单项中删除活动类并重新开始。它按预期工作，除非您单击菜单上的同级。活动类被添加到新单击的菜单项中，但它也保留在旧菜单项上。我编写的代码假设循环遍历所有菜单项以查看其中是否有任何一个具有“活动”类，删除该类，然后将“活动”类添加到新选择中。它不工作。

我做错了什么？还有没有更简单的方法可以做到这一点？我需要用 vanilla Javascript 解决这个问题。我不能使用 jQuery。

// html

<ul class="nav-items">
   <li class="nav-item"></li>
   <li class="nav-item"></li>
   <li class="nav-item"></li>
   <li class="nav-item"></li>
   <li class="nav-item"></li>
   <li class="nav-item"></li>
   <li class="nav-item"></li>
</ul>

// js

if (navItems) {
    navItems.addEventListener("click", function(e) {
        var background = document.querySelector('.background');
        var callout = document.querySelectorAll('.background, .nav-close')
        console.log(e.target.closest('.nav-item'));

        if (background.style.display !== "block") {
            background.style.display = "block";
            for( let i = 0; i < e.target.closest('.nav-items').children.length; i++ ) {
                console.log(e.target.closest('.nav-items'));
                e.target.closest('.nav-item').classList.remove('active');
            }

            e.target.closest('.nav-item').classList.add('active');

            if (background.style.display === "block") {
                callout.forEach(function(elem) {
                    elem.addEventListener("click", function(event) {
                        background.style.display = "none";
                        console.log('target', e.target);
                        e.target.closest('.nav-item').classList.remove('active');
                    }); 
                });
            }

        } else {
            background.style.display = "none";
            e.target.closest('.nav-item').classList.remove('active');

        }
    })
}

Answer 1

closest() 用于祖先而非兄弟姐妹。所以e.target.closest('.nav-item') 只会在最接近（）找到自己或匹配该选择器的祖先时找到自己。不是它的任何兄弟导航元素。

意义

e.target.closest('.nav-item').classList.remove('active')

仅尝试从当前单击的 li 中删除活动的类。

您可能打算在循环中使用e.target.closest('.nav-items').children 作为访问子 li 的一种方式，例如

var li = e.target.closest('.nav-items').children[i];
li.classList.remove('active');

但你并不真的需要一个循环，除非你认为你最终可能会得到多个活动元素。您可以通过找到离您最近的 ul 元素找到当前活动元素，然后从中找到具有类 active 的 nav-item，即 css 类选择器 .nav-item.active

var parentUL = e.target.closest('.nav-items');
var current = parentUL.querySelector('.nav-item.active');
current.classList.remove('.active');