如何让 HTML 可折叠列表默认展开？-html教程-PHP中文网

如何让 HTML 可折叠列表默认展开？

通过为 checkbox 输入框添加 checked 属性，并配合 CSS 正确设置初始显示状态，即可实现页面加载时列表默认展开的效果。关键在于确保 :checked + * 规则生效，且未勾选时的隐藏逻辑不干扰初始状态。

通过为 checkbox 输入框添加 `checked` 属性，并配合 css 正确设置初始显示状态，即可实现页面加载时列表默认展开的效果。关键在于确保 `:checked + *` 规则生效，且未勾选时的隐藏逻辑不干扰初始状态。

要让基于纯 CSS 的可折叠列表（collapsible list）在页面首次加载时就处于展开状态，核心思路是：让控制展开/折叠的复选框（<input type="checkbox">）默认处于勾选（checked）状态，并确保对应的子内容能被正确显示。

✅ 正确做法：添加 `checked` 属性 + 调整 CSS 优先级

原始 CSS 中，.collapsibleList li > input:checked + * { display: block; } 已支持展开逻辑，但前提是 HTML 中该 checkbox 必须带有 checked 属性：

TypeOne
- tst

同时，建议优化 CSS，明确未勾选时的隐藏行为，避免因样式覆盖导致意外折叠：

.collapsibleList li > input[type="checkbox"] {
  display: none;
}

/* 默认隐藏后续兄弟元素 */
.collapsibleList li > input[type="checkbox"] + * {
  display: none;
}

/* 勾选时显示后续兄弟元素（即子列表） */
.collapsibleList li > input[type="checkbox"]:checked + * {
  display: block;
}

.collapsibleList label {
  cursor: pointer;
}

⚠️ 注意：不要写 .collapsibleList li > input + * { display: none; } 这类无类型限定的选择器，否则会与 :checked + * 产生层叠冲突（后者权重相同，后声明者胜出），导致 checked 状态失效。

Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

? 进阶写法（CSS3 `:has()`，现代浏览器支持）

若目标环境支持 CSS :has()（Chrome 105+、Firefox 121+、Safari 15.4+），可采用更语义化的结构——将 <input> 内嵌于 <label></label> 中，并利用 :has() 控制显示：

.collapsibleList label {
  font-weight: bold;
  cursor: pointer;
}

/* 当 label 内 checkbox 未勾选时，隐藏紧随其后的 ul */
.collapsibleList label:has(input[type="checkbox"]:not(:checked)) + ul {
  display: none;
}

/* 默认 ul 显示（即初始展开）*/
.collapsibleList ul {
  list-style-type: disc;
  margin: 0;
  padding-left: 20px;
}

对应 HTML（更简洁、无障碍友好）：