Javascript - 如何删除所有活动类，除非被点击的元素已经有一个活动类答案

【问题标题】：Javascript - How to remove all active classes unless the element being clicked on already has a active classJavascript - 如何删除所有活动类，除非被点击的元素已经有一个活动类
【发布时间】：2017-04-01 16:40:26
【问题描述】：

    const offCanvasLinks = document.querySelectorAll('.off-canvas__link');

    [].forEach.call(offCanvasLinks, function(link) {
        link.addEventListener('click', (event) => {
            const typeVal = link.getAttribute('data-type') 

            if (typeVal === "star") {
                document.querySelector('[data-star-links]').classList.toggle('active');
            } else if (typeVal === "how-to") {
                document.querySelector('[data-how-to]').classList.toggle('active');
            } else {
                document.querySelector('[data-presenters]').classList.toggle('active');
            }
        })
    });

我有上面的代码，点击导航来切换一个活动类。

如果我单击导航中的另一个元素，我需要删除所有活动类，除非单击的元素已经具有活动类。

在 Jquery 中，使用 .not() 非常简单。您可以在其中通过事件目标检查并删除所有其他活动类。

因此，为了更清楚地说明这一点，我正在寻找一种删除所有活动类的方法，除非被单击的元素已经有一个活动类。

让我知道你的想法

**************** 更新 ****************** 好的... 单击底部的链接，如果您然后单击另一个链接，它将很好地显示一个屏幕，它将关闭前一个链接，然后打开下一个链接。但是，如果您单击相同的链接，它不会关闭菜单。

如果课程已经打开，我如何删除它？

链接：https://jsfiddle.net/2oqm0r2n/3/

【问题讨论】：

小提琴不是很有用，因为它在运行时什么都不显示。
让我更新 Jsfiddle Trincot，这样你就可以看到我的问题，渴望解决这个问题
嗨，Trincot，我刚刚更新了我的问题。我希望这现在更有意义。
我不明白。您问题中的以下两个短语似乎提出了两个矛盾的问题：“一种删除所有活动类的方法，除非被单击的元素已经有一个活动类。”，与：“但是，如果您单击相同的链接，它不会关闭菜单。如果该类已经打开，我该如何删除它？"
好的...我很难用语言表达。我想我想说的是，如果再次单击菜单，或者如果您从底部单击不同的链接，则关闭菜单，然后关闭打开的链接并打开新单击的容器。

标签： javascript

【解决方案1】：

也许是这样的？

例如：

// unless the clicked on element has already an active class
if(!link.classList.contains('active')){
    // remove all active classes
    var actives = document.querySelectorAll('.active');
    [].forEach.call(actives, function(elem) {  
        elem.classList.remove("active");
    });
}

【讨论】：

不，这行不通，因为我需要切换课程。因此，如果它处于活动状态，它将删除所有这些，然后将单击的一个再次变为活动状态。
我用if检查更新了代码，也许我理解错了。
不，恐怕这不是我要找的。我可能会遇到一些事情
我不明白你到底想要什么。
你已经写了三遍“删除所有活动类，除非点击的元素已经有一个活动类”，但我写的代码就是我所理解的。请澄清更多。

【解决方案2】：

如果我理解正确的话，你想要toggle被点击的item对应的元素的active类，并且你想要remove active 类来自所有其他元素。

你可以这样做：

  if (typeVal === containerVal) {
    container.classList.toggle('active')
  } else {
    container.classList.remove('active')
  }

查看您的updated fiddle

或者在一个“行”中：

container.classList.toggle('active', typeVal === containerVal && 
                                     !container.classList.contains('active'));

...在this fiddle

【讨论】：

你先生是个传奇。抱歉解释不佳。