javascript - 有没有比使用 Javascript 更好的方法在两种不同的样式之间切换

Question

 function dropDown(controller) {
        controller.toggle ? controller.content.style = "display: none;" : controller.content.style = "display: grid; grid-template-columns: 1fr;";
        controller.toggle = !controller.toggle;
    }

这就是我现在正在做的项目中的一些代码的样子，使用变量在两种状态之间切换感觉效率很低。我尝试想出一种使用 classList.toggle("class"); 的方法但它无法在两种不同的样式之间切换，它只能打开和关闭其中一种样式。

Answer 1

首先将样式放入 CSS 类中:

.hidden {
  display: none;
}

.someClass {
   display: grid; 
   grid-template-columns: 1fr;
}

然后将 someClass 应用于元素，并使用 classList 对象中的 toggle 方法来切换隐藏类:

controller.classList.toggle('hidden');

引用:https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

如果你会使用jQuery，那就非常简单了:

$(controller).toggleClass("someClass hidden");