如何让基于Codepen示例的Collapsible Tree页面加载时完全折叠？

你用的这个折叠菜单是靠active类控制节点展开状态的，初始所有带子菜单的节点都加了active类才会默认展开，下面给你两个简单的实现方案：

方法1：直接修改HTML（最适合新手） #

找到所有包含子菜单的<li>元素，删掉它们自带的active类就行。比如原代码里的：

<li class="active">
  <label>Menu 1</label>
  <ul>
    <!-- 子菜单内容 -->
  </ul>
</li>

改成：

<li>
  <label>Menu 1</label>
  <ul>
    <!-- 子菜单内容 -->
  </ul>
</li>

把所有带子菜单的<li>的active类都去掉，页面加载时子菜单就会默认隐藏。

方法2：用JS自动处理（不用改HTML） #

如果不想动HTML结构，就在现有JavaScript代码的最后加上这段：

$(document).ready(function() {
  // 找到所有包含子ul的li节点，移除active类
  $('li:has(ul)').removeClass('active');
});

这段代码会在页面加载完成后，自动把所有带子菜单的节点的active类去掉，触发折叠效果。

说下你之前尝试的问题 #

你写的$('toggleClass').click()没用，是因为toggleClass不是元素选择器，而且就算选中正确的节点，点击事件是切换类（展开变折叠，折叠变展开），初始展开的节点点一次会折叠，但多层嵌套的话需要多次点击，不如直接移除active类来得直接。

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