如何实现可折叠面板在JavaScript禁用时自动展开？现有方案失效求助

问题原因分析 #

你之前的两个方案失效核心有两个共性问题：

1. 直接操作getElementsByClassName返回的HTML集合，该接口返回的是多个元素的类数组对象，不能直接修改style属性，必须遍历逐个操作
2. 写max-height: 100时没有加单位，属于无效CSS规则，无法覆盖原有配置

推荐实现方案（两种可选） #

方案1：修正noscript方案（改动最小，无需修改原有逻辑） #

保留你现有的所有代码，仅修改noscript内的CSS规则即可：

<noscript>
<style>
.content {
  /* 直接取消高度限制，优先级加!important确保覆盖原有规则 */
  max-height: unset !important;
  overflow: visible !important;
}
/* 无JS场景下取消标题的点击手型，避免误导用户 */
.collapsible {
  cursor: default;
}
</style>
</noscript>

该方案原理：noscript标签内的样式仅在浏览器禁用JS时生效，直接取消折叠容器的高度限制，实现自动展开。

方案2：渐进增强方案（兼容性更好，无noscript依赖） #

该思路遵循「默认可用，JS增强」的原则，默认内容全展开，JS运行时再将面板置为折叠状态：

1. 修改原有CSS规则：

.collapsible {
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
}
.content {
  /* 默认状态无高度限制，即展开 */
  max-height: unset;
  overflow: visible;
  transition: max-height 0.2s ease-out;
}
/* 仅JS生效时才添加折叠样式 */
.js-enabled .content {
  max-height: 0;
  overflow: hidden;
}

2. 在现有JS代码最顶部加一行标记JS可用的代码：

// 标记JS已启用，触发折叠样式
document.body.classList.add('js-enabled');

// 你原有折叠逻辑保持不变即可
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

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