jQuery手机端多级菜单切换效果
黑色简洁风格的手机导航菜单，用 jQuery 搞个多级切换还挺顺的，适合屏幕不大的场景。你要是做移动端导航，得考虑菜单怎么收起、怎么展开，点着顺不顺手，用户看不看得明白。这套用jQuery写的多级菜单切换，思路清晰，代码不多，动画也流畅，挺适合新手拿来改一改用的。
jQuery 的slideToggle动画，做手机菜单切换还挺合适。响应快，逻辑也直观。你点一下一级菜单，子菜单就展开，再点就收起来，配合e.preventDefault()防跳转，体验上挺舒服的。
HTML 结构也简单，，想加几级就加几级。子菜单平时隐藏，点了才显示，节省空间又不乱。样式方面，用 CSS控制子菜单默认display: none，点了以后靠 jQuery 来切换状态。基础的做法，但也挺实用。
样式你可以按自己项目风格来改，动画速度'fast'、'slow'都能调，想高级点可以加transition效果。注意触摸设备上没有悬停，所以别用:hover来控制菜单展开，用点击事件靠谱些。
哦对，还有一点，建议你加上stopPropagation()，不然点子菜单会把上层也给触发了，结果菜单一下就全收了，那就尴尬了。
你如果还想看看类似的实现，有几个资源还不错：
如果你想快速上手一个移动端菜单，功能不用太复杂，这个方案还挺合适的。也方便你后续整合到项目里，灵活扩展。
下载地址
用户评论
