如何让页面加载时HTML可折叠列表默认展开？

你的CSS逻辑是通过checkbox的选中状态控制后续元素的显示/隐藏：未选中时隐藏，选中时显示。要实现默认展开，只需调整checkbox的初始状态或CSS规则即可，以下是两种可行方案：

方案1：给checkbox添加checked属性（推荐） #

直接在HTML的checkbox标签中加入checked属性，让页面加载时checkbox默认处于选中状态，触发显示规则：

<body>
<ul class="collapsibleList">
  <li>
    <label for="mylist-node9">
        <b>TypeOne</b>
    </label>
    <input type="checkbox" id="mylist-node9" checked />
    <ul style="list-style-type:disc">
      <li> 
        tst
      </li>
    </ul>
  </li>
</ul>
</body>

方案2：调整CSS规则逻辑 #

修改CSS的默认显示状态，让元素默认展开，仅当checkbox未选中时隐藏：

/* 默认显示input后续元素（展开状态） */
.collapsibleList li > input + * {
 display: block;
}
/* checkbox未选中时隐藏元素（折叠状态） */
.collapsibleList li > input:not(:checked) + * {
 display: none;
}
.collapsibleList li > input {
 display: none;
}
.collapsibleList label {
 cursor: pointer;
}

这种写法下，无需修改HTML，页面加载时列表默认展开，点击标签可切换折叠/展开状态。

原代码不生效的原因 #

默认情况下checkbox处于未选中状态，触发了.collapsibleList li > input + * { display: none; }规则，导致子列表被隐藏。通过上述两种方式修改后，初始状态会触发显示规则，实现默认展开。

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