jQuery 竖直手风琴菜单收缩展示下拉菜单-20130725

1、效果及功能说明

框架制作两种非常简单的jquery手风琴菜单特效,鼠标滑过手风琴与鼠标点击触发手风琴

2、实现原理

手风琴的效果一个是点击事件的效果一个触碰效果,都是当点击获得触碰触发添加一个让得显示的类后获得一个滑动效果让子类出现,当再次点击获得点击其他,和触及消失获得触及其他后当前的就会自动滑动消失,在删除掉展示的类


主要的方法


$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
//添加类,后查询每一个元素的下一个元素div.menu_body开展然后定义一个滑动效果里面包含显示和隐藏,在查询当前里面包裹的其他元素,让他们全部通过滑动效果隐藏起来


3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/4278/3ce6413f-d713-3b17-9694-8833d62e14a1.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现


5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果


7、代码[html5]















你可能感兴趣的:(学习,前端技术,jQuery)