咨询：JavaScript切换两种不同样式的更优实现方式

嘿，我完全懂你的困扰——直接操作DOM元素的style属性不仅代码冗余，还把样式逻辑混在JS里，后期维护起来特别麻烦。其实你对classList.toggle()的用法有点小误解，它绝对能帮你实现两种状态的样式切换，甚至还有更符合前端最佳实践的方案！

方案1：默认样式 + 切换类（最推荐） #

这是前端开发中最常用的模式：把基础样式和切换状态的样式都放在CSS里，JS只负责触发类的切换，完美实现关注点分离。

首先在CSS里定义好默认状态和激活状态：

/* 默认隐藏下拉内容 */
.dropdown-content {
  display: none;
}
/* 激活时的布局样式 */
.dropdown-content.active {
  display: grid;
  grid-template-columns: 1fr;
}

然后你的JS代码可以简化成一行：

function dropDown(controller) {
  // 只需要切换active类，CSS会处理所有样式变化
  controller.content.classList.toggle("active");
}

这样你再也不用手动维护toggle变量了，classList.toggle()会自动跟踪元素的类状态，比你原来的方法简洁太多，而且样式全部集中在CSS里，修改起来更方便。

方案2：切换两个互斥类（适合特殊场景） #

如果你的需求是两种完全独立的样式状态（比如没有默认样式，需要在A、B状态间切换），classList.toggle()也能搞定——只需要同时切换两个类：

/* 状态A：隐藏 */
.dropdown-hidden {
  display: none;
}
/* 状态B：网格布局 */
.dropdown-grid {
  display: grid;
  grid-template-columns: 1fr;
}

对应的JS：

function dropDown(controller) {
  // 同时切换两个类，实现状态互斥
  controller.content.classList.toggle("dropdown-hidden");
  controller.content.classList.toggle("dropdown-grid");
}

这种方式适合两种状态没有默认优先级的场景，但一般来说方案1已经能覆盖绝大多数下拉切换需求。

方案3：CSS自定义属性（适合复杂样式切换） #

如果你的下拉切换涉及多个样式属性的变化，还可以用CSS自定义属性来统一管理状态：

.dropdown-content {
  /* 默认状态的变量值 */
  --display-state: none;
  display: var(--display-state);
  grid-template-columns: 1fr;
}
.dropdown-content.active {
  /* 激活状态的变量值 */
  --display-state: grid;
}

JS代码还是和方案1一样，只需要切换active类即可。这种模式在需要切换多个样式属性时会更灵活，比如同时改背景色、间距等，只需要修改变量值就行。

总的来说，把样式逻辑从JS转移到CSS，用classList.toggle()来切换类，是最优雅也最易维护的实现方式，完全替代你原来手动操作style属性和维护toggle变量的方法。

内容的提问来源于stack exchange，提问作者Ammawn