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（＆＃34; class＆＃34;）;但它无法在两种不同的样式之间切换，只需打开和关闭一种样式。

Answer 1

首先将样式放在CSS类中：

.hidden {
  display: none;
}

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

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

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;";

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

4 个答案: