如何重复javascript函数以及如何反转javascript函数

我有点不好意思承认，我不太擅长javascript。我需要一些帮助。 有一个模式是在Javascript的帮助下打开的，不过我将给您一些简化的代码

想象一下，在这个宇宙的某个地方有一个按钮 这是html和css中的模式

< div class="modal" > < /div >
.modal {width: 0vw;}
.modal-open {width: 50vw;}

Javascript - document.getElementById('that-button').addEventListener('click', function () {
  document.querySelector('.modal').classList.add('modal-open');
});

长话短说，模态保持隐藏的宽度：0vw，按下打开按钮，它以更大的宽度打开。按下关闭按钮，模式关闭

但是，在此之后，该模式将无法再次打开。我想知道怎么做

第二个问题：想象同样的场景，但是没有关闭按钮。是否可以通过集成一些反向功能，使用打开模式按钮打开和关闭模式

我想提前感谢你

致以最良好的问候

---

Anthony Ivanov

当您打开它时，它将获得类

模式打开

当您关闭它时，它将获得类

模态关闭

，因此现在它有两个类

再次单击“打开”按钮不会执行任何操作，因为它已经具有该类

---

不要使用两个类来跟踪可能处于两种状态的事物的状态

使用一个类<代码>添加它以打开，删除它以关闭

---

是否可以通过集成一些反向功能，使用打开模式按钮打开和关闭模式

在一般情况下，没有。没有办法说“做这个任意函数所做的事情，只是向后做”。函数所做的事情甚至可能是不可逆的

---

在这种情况下，您可以

切换
类，而不是添加和删除它。
听起来像是
模式关闭
类的存在覆盖了
模式打开
类设置的规则，因此如果它关闭，它将保持关闭状态

<>而不是使用两个单独的类，而是考虑只使用一个单独的类：默认情况下关闭它，然后有<代码>。如果要关闭它，请不要添加其他类，而是删除现有类：

document.getElementById('that-other-button').addEventListener('click', function () {
  document.querySelector('.modal').classList.remove('modal-open');
});

你不应该因为不知道我会尽量不知道而感到羞耻。谢谢你，昆汀。我很惊讶这么小的东西能教会我这么多。你做得非常好，帮我省去了一大堆头疼的事！你不知道我有多需要这个。非常感谢。
document.getElementById('that-other-button').addEventListener('click', function () {
  document.querySelector('.modal').classList.remove('modal-open');
});