Question

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

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

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

在Jquery中，使用.not（）是非常容易的。您可以通过事件目标来检查并删除所有其他活动类。

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

让我知道你的想法

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

如果该类已经打开，该怎么删除它？

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

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

Answer 2

如果我理解正确，您希望切换与所点击的项目对应的元素的活动类，并且您想要删除来自所有其他元素的活动类。

您可以这样做：

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

查看您的updated fiddle

或在一个“行”中：

window.Date = new Proxy(Date, {
    construct: function(target, args) {
        if (args.length === 0) {
            return new target(2017, 04, 13, 15, 03, 0);
        }
        return new target(...args);
    }
});

...在this fiddle

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

2 个答案: