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（）を使用できます。イベントターゲットを通過して、他のすべてのアクティブなクラスをチェックして削除することができます。

これをもっと明確にするには、クリックされた要素に既にアクティブなクラスがない限り、すべてのアクティブなクラスを削除する方法があります。

は、更新***********私は自分の考えを知ってみましょう****************** [OK]をクリックして... 一番下のリンクには、別のリンクをクリックすると、前のリンクを閉じて次のリンクを開くと、うまく画面が表示されます。ただし、同じリンクをクリックしてもメニューは閉じません。

既に開いているクラスを削除するにはどうすればよいですか？

リンク：このようなhttps://jsfiddle.net/2oqm0r2n/3/

Answer 1

、あなたがクリックされた項目に対応する要素のトグルアクティブクラスにしたい、とあなたはしたいアクティブを削除他のすべての要素からのクラス。

次のようにあなたが行うことができますこの：

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

あなたupdated fiddle

または1つ "行" で参照してください：フィドルがあるthis fiddle

Answer 2

多分何か？例えば

：私が正しく理解していれば

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