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

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

我有上面的代码，点击导航来切换活动类。Javascript - 如何删除所有活动的类，除非被点击的元素已经有一个活动类

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

在jquery中，使用.not（）的功能非常简单。你可以通过事件目标来检查并删除所有其他活动类。

所以为了使这个更清楚我正在寻找的是一种方法来删除所有活动的类，除非被点击的元素已经有一个活动类。

让我知道你的想法

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

如果该类已经打开，该如何删除该类？

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

来源

2017-04-01 MaxwellLynn

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

...小提琴是不是很有用，因为它在运行时不显示任何内容。 – trincot

让我更新Jsfiddle Trincot，以便您可以看到我的问题，急于解决此问题 – MaxwellLynn

嗨Trincot，我刚刚更新了我的问题。我希望现在更有意义。 – MaxwellLynn

如果我理解正确的话，你要切换的活跃类对应于被点击项的元素，并且要删除的活跃从所有其他元素的类。

这你可以做如下：

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

请参阅updated fiddle

或者在一个 “行”：在this fiddle

来源

2017-04-01 18:21:35 trincot

您先生是一个传奇人物。对于糟糕的解释抱歉。 – MaxwellLynn

没问题，欢迎您;-) – trincot

也许这样的事情？

例如：

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

来源

2017-04-01 16:44:03

Nah这不起作用，因为我需要切换类。因此，如果它是活动的，它将删除所有它们，然后再次将点击的一个激活。 – MaxwellLynn

嗯只是看着你的编辑 – MaxwellLynn

我用if检查更新了代码，也许我理解错了。 –

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

回答

相关问题