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

Question

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

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

Answer 1

首先将样式放入CSS类中：

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

然后将someClass应用于元素，并使用对象中的toggleclassList方法切换隐藏类：

controller.classList.toggle('hidden');

参考： https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

如果可以使用jQuery，则非常简单：

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

Answer 2

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

.CSS：

.X {

拥有一种风格

}

.Y {

//有其他风格 }

。.js

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

Answer 3

最初在元素上应用hide类，然后可以删除该类并在条件后添加另一个类。

试试这个：

function dropDown(controller) {
if (controller.content.classList.contains('hide')) {
controller.content.classList.remove('hide');
controller.content.classList.add('showGrid');
} else {
controller.content.classList.add('hide');
controller.content.classList.remove('showGrid');
}
}

.hide {
display: none;
}
.showGrid {
display: grid;
grid-template-columns: 1fr;
}

Answer 4

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

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