使用 vanilla javascript 切换模式

Question

我习惯于使用 jQuery，但我正在尝试回到 vanilla 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;
    }
}});

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