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 - 如何刪除所有活動的類，除非被點擊的元素已經有一個活動類

回答

相關問題