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

这就是我正在做的项目的一些代码现在的样子，使用变量在两种状态之间切换感觉效率低下。我试着想办法使用classList.toggle（“class”）；但是它不能在两种不同的样式之间切换，它只需打开和关闭一种样式。

首先将样式放入

CSS

类中：

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

然后对元素应用

someClass

，并使用

classList

对象中的

toggle

方法切换隐藏类：

.hidden {
  display: none;
}

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

参考：

如果您可以使用

jQuery

，它非常简单：

controller.classList.toggle('hidden');

---

您可以在css中创建包含每个样式的两个类，然后在它们之间切换：

CSS:

.X {

//有一种风格

}

.Y {

//别出心裁 }

.js

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

---

首先在元素上应用

hide

类，然后可以删除该类并在条件之后添加另一个类

试试这个：

功能下拉列表（控制器）{
if（controller.content.classList.contains（'hide'））{
controller.content.classList.remove（'hide'）；
controller.content.classList.add（'showGrid'）；
}否则{
controller.content.classList.add（'hide'）；
controller.content.classList.remove（'showGrid'）；
}
}

.hide{
显示：无；
}
.showGrid{
显示：网格；
网格模板列：1fr；
}

使用三元似乎是正确的方法，但是可以简化很多：

$('#div').toggleClass('X Y');

---

而不是使用style=display:none也许使用像“hide”这样的css类是您想要的。在较新的浏览器中，您可以在任何DOM元素上使用

元素.classList.toggle（“hide”）

方法@ammawn对象分解

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