jQuery手机端垂直选单菜单切换
手机端的垂直二级菜单,用起来其实挺频繁的,是做响应式项目时。jQuery那套事儿你应该挺熟,用它做交互,代码少,效果还挺顺滑。这里的思路是:主菜单点一下,子菜单用slideToggle
展开或收起,配合点CSS
的隐藏逻辑,就能搞定个不错的小导航。
结构也简单,
嵌套
就行了,样式控制下.sub-menu
的display: none
,用媒体查询限制在小屏设备触发就好。触发方式用click
代替hover
,更适合触摸屏。
还有个点别忘了,如果菜单是动态加载的,可以用$(document).on('click')
这种事件委托写法,健壮性会高一些。触屏设备也可以监听touchstart
,手感更贴近原生。
不嫌麻烦的话,还可以做下防点穿、防连点这些优化,配点节流啥的,细节越抠体验越好。如果你在用老项目,或者想快速搞个可用菜单,不妨试试这套方式。
下载地址
用户评论