用香草切換模式javascript

Question

我習慣於使用jQuery，但我試圖回到香草javascript。我有一個鏈接，點擊時會顯示帳戶模式。

我也想改變模態的類，當點擊'模態可見'。這可以按預期的方式工作，但是當我再次點擊鏈接關閉模式時，我需要班級改回'模態隱藏'。

我想知道是否有人可以幫助我。也許它需要一個切換，而不是？

var accountModal = document.getElementById("account-modal"); 
document.querySelector('#account-photo').addEventListener('click', function(e) { 
    e.preventDefault(); 
    accountModal.classList.add('modal-visible'); 
    accountModal.classList.remove('modal-hidden'); 
    accountModal.setAttribute('aria-hidden', 'false'); 
}); 

<a id="account-photo" href="/customer" tabindex="0" aria-expanded="false">Account</a> 
<div id="account-modal" class="modal-visible" aria-label="Account Information" aria-hidden="false">Account Info</div> 

Answer 1

下面是做這件事的方式，如果我們假設它總是開始封閉：

document.querySelector('#account-photo').addEventListener('click', function() {var is_visible = false; return function(e) { 
    e.preventDefault(); 
    if(!is_visible) { 
     accountModal.classList.add('modal-visible'); 
     accountModal.classList.remove('modal-hidden'); 
     accountModal.setAttribute('aria-hidden', !is_visible); 
     is_visible = true; 
    } else { 
     accountModal.classList.remove('modal-visible'); 
     accountModal.classList.add('modal-hidden'); 
     accountModal.setAttribute('aria-hidden', !is_visible); 
     is_visible = false; 
    } 
}}); 

這種方法基本上是作爲一個手動編碼的切換。