文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载导读本文围绕《现代 JavaScript 教程》中「浏览器事件简介」一章的 05-sliding-menu 练习完整拆解一个点击展开/折叠菜单的实现方案先用独立 DOM 组件与ul/li语义化列表搭建结构再用 CSS 以.open类驱动箭头与列表的显隐最后在 JavaScript 中仅通过一行classList.toggle(open)完成状态切换。读完本文你将掌握「状态交给 CSS、行为交给 JS」的前端组件编写思路并能在 浏览器事件简介 的知识框架下理解onclick、this、classList与addEventListener的实际用法。任务背景一个 importance 5 的实战练习该练习位于仓库目录 2-ui/2-events/01-introduction-browser-events/05-sliding-menu/其 任务说明 标注了importance: 5最高重要度要求创建一个在点击时打开/折叠的菜单。任务同时给出一条关键约束源文档的 HTML/CSS 将被修改仓库中保留了改动前的原始版本 source.view/index.html 与改动后的完整实现 solution.view/index.html。也就是说这份练习真正要训练的是不依赖任何框架、纯用 HTML CSS 原生事件处理把一个静态结构变成一个可交互组件。需要说明的是该练习英文名虽为 sliding menu但其核心交互是「展开/折叠」——即菜单项列表的显示与隐藏实现中并没有位移动画。HTML 结构为什么菜单必须是一个独立 DOM 元素解决方案讲解 首先强调菜单是页面上的一个独立图形组件所以最好把它放入一个单独的 DOM 元素中。这既是组件化的基本思路也让后续的 CSS 选择器与 JS 查找都集中在一个局部范围内不会污染页面其他区域。菜单项列表用语义化的ul/li列出示例结构如下div classmenu span classtitleSweeties (click me)!/span ul liCake/li liDonut/li liHoney/li /ul /div标题为什么用span而不是div这是本方案中最容易被忽略、却最能体现细节功底的一个选择。div有隐式的display: block会占据 100% 的水平宽度如果直接给div挂onclick那么点击标题右侧的大量空白区域也会触发事件div styleborder: solid red 1px onclickalert(1)Sweeties (click me)!/div而span的隐式display是inline它恰好只占据足以容纳全部文本的位置span styleborder: solid red 1px onclickalert(1)Sweeties (click me)!/span因此把可点击的标题做成span可以让「点击即触发」的热区精确地落在标题文字上而不是扩散到整行。这一点在 solution.view/index.html 中被原样保留。CSS 状态设计把「开/关」全部交给样式「切换菜单应更改箭头并显示/隐藏菜单列表」而解决方案的核心理念是所有这些更改都可以通过 CSS 完美处理在 JavaScript 中我们只通过添加/移除.open类来标记菜单的当前状态。默认关闭状态.menu ul { margin: 0; list-style: none; padding-left: 20px; display: none; } .menu .title::before { content: ▶ ; font-size: 80%; color: green; }这里有两处值得展开列表默认display: none菜单项在初始状态下不可见箭头并不是真实字符而是通过伪元素::before的content属性由 CSS 生成的font-size: 80%让它比标题略小color: green赋予颜色。这样做的好处是箭头属于「视觉呈现」理应归样式层管理HTML 中可以保持干净。打开.open状态.menu.open .title::before { content: ▼ ; } .menu.open ul { display: block; }一旦.menu上存在.open类标题前的箭头由▶变为▼展开方向指示列表由display: none变为display: block菜单项出现。对照 solution.view/index.html 可以看到完整实现还额外补充了两条细节标题font-size: 18px让可读性更好cursor: pointer让鼠标悬停在标题上时显示手型光标暗示「此处可点击」——这是交互组件的基本体验要素。JavaScript一行classList.toggle完成交互HTML 与 CSS 就绪后剩下的交互逻辑极其简洁。完整实现中的脚本部分如下见 solution.view/index.htmlscript let menuElem document.getElementById(sweeties); let titleElem menuElem.querySelector(.title); titleElem.onclick function() { menuElem.classList.toggle(open); }; /script逐行解读document.getElementById(sweeties)通过 id 拿到菜单根元素HTML 中写作div idsweeties classmenumenuElem.querySelector(.title)在菜单内部查找标题元素——查找范围被限制在组件内部这正是第一步「独立 DOM 元素」带来的收益titleElem.onclick function() { ... }使用DOM 属性property方式分配click处理程序对应 article.md 中「DOM 属性」一节讲的elem.onclick写法menuElem.classList.toggle(open)在根元素上反复切换.open类——有则移除、无则添加箭头与列表随之被 CSS 自动更新。这正是前面所说的分工JS 不直接操作样式只维护状态类.openCSS 根据类选择器呈现两种形态。状态与表现解耦后交互逻辑只保留了核心的一行。两种等价的可选写法结合 article.md 中「访问元素this」一节的说明在处理程序中this的值就是事件所绑定的元素。因此把函数写成普通函数时也可以利用this向上定位菜单titleElem.onclick function() { this.parentElement.classList.toggle(open); };如果更倾向于 article.md 中「addEventListener」一节的灵活方式同一个事件可挂多个处理程序也可以写成titleElem.addEventListener(click, () { menuElem.classList.toggle(open); });需要提醒的是箭头函数没有自己的this此时必须像解决方案那样通过外部变量menuElem访问菜单元素或者使用事件对象event.currentTarget来定位元素。从 source 到 solution改动点复盘仓库同时保留了练习的初始版本 source.view/index.html。对比两份文件可以直观看到本次练习的全部改动HTML把散落在页面的标题与ul/li列表收拢进div classmenu组件容器并为容器加上idsweeties便于 JS 查找CSS新增.menu系列规则——默认隐藏ul、伪元素生成箭头、.open状态切换箭头与列表显隐外加标题字号与手型光标JavaScript新增 6 行脚本用onclickclassList.toggle(open)驱动整个交互。「源文档的 HTML/CSS 将被修改」这句任务约束落到实际操作中就是指不要在 HTML 里写死展开/折叠的最终状态而是让一份 CSS 同时覆盖两种状态由 JS 动态切换类名来决定当前显示哪一种。总结结构层菜单是独立组件放入单独 DOM 元素标题用spandisplay: inline避免display: block的 100% 宽度扩大点击热区列表用语义化的ul/li表现层默认ul { display: none }且::before生成▶箭头.menu.open时箭头变▼、列表display: block全部由 CSS 驱动行为层JS 只做一件事——classList.toggle(open)通过 DOM 属性 onclick 绑定点击处理程序如需挂多个处理程序可改用addEventListener。这种「CSS 负责状态呈现、JS 负责状态流转」的模式是构建可维护前端组件的基础思路也是后续「事件委托」「自定义事件」等章节反复使用的心智模型。可运行全量代码见 solution.view/index.html。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐JavaScript 事件委托实战实现可点击折叠的树形菜单Tree menuJavaScript 事件委托实战实现可点击折叠的树形菜单Tree menu 本篇指南基于 Modern JavaScript Tutorialen.j文档/教程前端javascript.info 实战用 onclick 事件与 CSS 状态类实现可折叠滑动菜单javascript.info 实战用 onclick 事件与 CSS 状态类实现可折叠滑动菜单 本文围绕 javascript.info 教程「浏览器事件入文档/教程前端5分钟上手如何用Python SDK控制你的开源桌面机器人5分钟上手如何用Python SDK控制你的开源桌面机器人 想要亲手控制一台智能机器人但觉得硬件门槛太高Reachy Mini为你打开了一扇通往机器人世界机器人人工智能语音计算机视觉智能硬件上一篇数据结构面试指南gh_mirrors/al/algorithms中的位运算问题下一篇Zellij版本迁移工具开发创建自定义迁移创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考