掌握Sidr的4大回调函数：onOpen、onClose、onOpenEnd、onCloseEnd完全指南
【免费下载链接】sidrSidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.项目地址: https://gitcode.com/gh_mirrors/si/sidr
🎯Sidr是一款轻量级 jQuery 侧边栏菜单插件，而Sidr 回调函数（onOpen、onClose、onOpenEnd、onCloseEnd）正是让它"活"起来的关键。通过这 4 个回调，你可以在菜单打开、关闭的每个瞬间执行自定义逻辑：播放声音、埋点统计、切换主题……本指南用最直白的方式讲清它们的触发时机与用法。
⚡ 一图看懂：4 个回调的触发时机
Sidr 的每个侧边栏都内置了 4 个空回调，定义在默认配置文件中：src/js/default.options.js
| 回调函数 | 触发时机 | 一句话理解 |
|---|---|---|
onOpen | 菜单开始滑出的瞬间 | "门刚推开一条缝" |
onOpenEnd | 菜单完全展开后 | "门开到位了" |
onClose | 菜单开始收回的瞬间 | "门开始关上" |
onCloseEnd | 菜单完全收起后 | "门关严了" |
💡 记住这个规律：没有 End 后缀 = 动作开始；带 End 后缀 = 动画结束。整个动画时长由
speed选项控制（默认 200 毫秒）。
🔍 源码揭秘：回调到底何时被调用？
想彻底搞懂，看看 src/js/models/menu.js 里的执行流程：
- 打开流程：
open()方法先启动位移动画，紧接着同步调用onOpen（menu.js#L89）——所以它比动画结束更早执行； - 收尾流程：动画走完后，监听器触发
onOpenMenu()，内部调用onOpenEnd（menu.js#L119），同时更新状态：status.opened被设为菜单名（src/js/status.js）。
这正是"开始类"与"结束类"回调的本质区别：前者在指令发出时触发，后者在 CSS 过渡（transition）真正完成时触发。
🚀 快速上手：3 步配置回调
官方示例 examples/jquery/menu-with-callbacks.html 展示了标准写法，只需在初始化时传入回调函数：
$('#simple-menu').sidr({ speed: 700, // 放慢动画，方便观察回调时机 onOpen: function () { /* 菜单开始打开 */ }, onClose: function () { /* 菜单开始关闭 */ }, onOpenEnd: function () { /* 菜单打开完毕 */ }, onCloseEnd: function () { /* 菜单关闭完毕 */ } });该示例用"背景变色"来可视化 4 个时机：打开时变红 → 完全展开变灰 → 关闭时变绿 → 收起后还原（menu-with-callbacks.html#L62-L78）。你可以打开这个文件，亲眼看到 4 种颜色依次切换。
🧩 实战场景：回调能帮你做什么？
- 📊 数据统计：在
onOpenEnd中上报"菜单已展开"事件，此时用户真正看见了内容，统计更准确； - 🔊 音效反馈：在
onOpen/onClose中播放开关音效，给用户即时听觉反馈； - ⌨️ 焦点管理：在
onOpenEnd中把键盘焦点移入菜单第一项，提升无障碍体验； - 🎨 状态同步：在
onCloseEnd中把汉堡按钮图标从"×"切回"≡"——注意要用 End 回调，否则动画还没收完图标就变了。
⚠️ 避坑小贴士
- 回调不会在"假动作"时触发：菜单已经在打开状态时再次调用
open()会被直接拦截（menu.js#L73-L75），onOpen不会重复触发——这是防止状态错乱的保护机制； - 移动中不可打断：
status.moving为 true 期间（动画进行中）忽略新的开关指令（menu.js#L94），所以onOpen与onOpenEnd之间不会有其他回调插队； - 多菜单切换：同时打开另一个菜单前，Sidr 会先关闭当前菜单并等待其回调链跑完（menu.js#L78-L86），顺序始终是"先关后开"。
📚 延伸资源
- 默认配置全貌：src/js/default.options.js
- 菜单核心逻辑：src/js/models/menu.js
- 回调行为的自动化测试：spec/models/menu.spec.js
- 更多玩法示例：examples/README.md
掌握这 4 个 Sidr 回调函数，你就拥有了对侧边栏每一个瞬间的完整控制权——从指尖点击到菜单停稳，全程尽在掌握！✅
【免费下载链接】sidrSidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.项目地址: https://gitcode.com/gh_mirrors/si/sidr
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
