要让子菜单默认收起，需三步：1. 给二级及以下设display: none；2. 为带子菜单的添加开关按钮；3. js用btn.closest('li').queryselector('ul')精准控制对应菜单，避免nextelementsibling失效。
零基础直接抄就能用，但必须改对三个地方：文件路径、菜单层级结构、CSS类名绑定——改错一个就收不到折叠效果。
怎么让 <ul></ul> 里的子菜单默认收起来
浏览器默认展开所有 <ul></ul>，要折叠得靠 CSS 隐藏 + JS 控制显隐。关键不是“加功能”，而是“先压住再点开”：
- 给所有二级及以下
<ul></ul>加style="display: none;"或统一用 CSS 类（比如.submenu）设display: none - 只给一级
<li>里带子菜单的项加一个开关按钮，比如<button class="toggle-btn">▶</button> - JS 只监听这些按钮的点击，
toggle()对应的下一个<ul></ul>元素（别用querySelectorAll找错层级）
querySelector 和 nextElementSibling 别混用
很多人写 JS 时用 document.querySelectorAll('.toggle-btn') 拿到所有按钮，但点击后想控制“它下面的菜单”，却错误地写成 btn.nextElementSibling —— 这只在 HTML 结构严格满足“按钮紧挨着 <ul></ul>”时才有效：
- ✅ 正确结构：
<li> <button>首页</button><ul><li>子页</li></ul> </li> - ❌ 错误结构：按钮和
<ul></ul>中间有空格、换行、注释或<span></span>等其他元素，nextElementSibling就会返回null - 更稳写法：
btn.closest('li').querySelector('ul')，靠父容器定位，不依赖相邻关系
为什么点一次没反应？检查这三处硬伤
零基础最容易卡在这几个“看不见”的环节，不是代码写错，是执行环境没到位：
- JS 代码放在
里，但 DOM 还没加载完 → 把<script></script>移到前，或包在DOMContentLoaded里 - HTML 文件用双击方式直接打开（
file://协议），某些浏览器禁用本地 JS 的 DOM 操作 → 改用python -m http.server或 Live Server 插件起个本地服务 - CSS 类名和 JS 里写的不一致，比如 HTML 写
class="menu-toggle"，JS 却查.toggle-btn→ 用浏览器开发者工具的 Elements 面板实时比对
树形菜单真正的复杂点不在折叠逻辑本身，而在于嵌套层级变深后，closest() 和 querySelector() 的路径是否还能精准命中——多一层 <div> 包裹，就可能让原本好用的 JS 失效。动手前先用浏览器“审查元素”确认结构，比反复改 JS 更快。 </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
