Javascript-如何刪除所有活動類，除非被單擊的元素已經具有活動類

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

我有上面的代碼，單擊導航以切換活動類。

如果單擊導航中的另一個元素，則需要刪除所有活動類，除非單擊的元素已經具有活動類。

在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

如果我理解正確， 則要切換與單擊的項目相對應的元素的活動類，並要從所有其他元素中刪除該活動類。

您可以執行以下操作：

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

查看更新的小提琴

或在一個“行”中：

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

...在這個小提琴中