使用香草 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;
    }
}});

此方法基本上充当手动编码的切换。