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

Question

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

我做错了什么？还有更简单的方法可以做到这一点吗？我需要用普通的 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() 适用于祖先而不是 sibling 。因此，e.target.closest('.nav-item') 只会在closest() 找到自身或与该选择器匹配的祖先时找到自己。不是任何同级导航元素。

含义

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