jQuery 竖直手风琴菜单收缩展示下拉菜单-20130725
1、效果及功能说明
框架制作两种非常简单的jquery手风琴菜单特效，鼠标滑过手风琴与鼠标点击触发手风琴
2、实现原理
手风琴的效果一个是点击事件的效果一个触碰效果，都是当点击获得触碰触发添加一个让得显示的类后获得一个滑动效果让子类出现，当再次点击获得点击其他，和触及消失获得触及其他后当前的就会自动滑动消失，在删除掉展示的类
主要的方法
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");//添加类，后查询每一个元素的下一个元素div.menu_body开展然后定义一个滑动效果里面包含显示和隐藏，在查询当前里面包裹的其他元素，让他们全部通过滑动效果隐藏起来
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function(){//定义方法$("#firstpane .menu_body:eq(0)").show();//获得显出方法$("#firstpane p.menu_head").click(function(){//定义点击事件$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");//点击当前添加一个current类 查找每个段落的下一个同胞元素名为div.menu_body滑动效果带有隐藏和显示功能 查找所有类名为div.menu_body的元素获得滑动方式隐藏$(this).siblings().removeClass("current");//当前的互动额 查找所有类名 删除类名为current});$("#secondpane .menu_body:eq(0)").show();//获得显出方法$("#secondpane p.menu_head").mouseover(function(){//定义鼠标触及方法$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");//当鼠标触及到当前添加一个current类 查找每个段落的下一个同胞元素名为div.menu_body滑动效果带有隐藏和显示功能 查找所有类名为div.menu_body的元素获得滑动方式隐藏$(this).siblings().removeClass("current");//当前的互动额 查找所有类名 删除类名为current});});</script><style type="text/css">*{margin:0;padding:0;list-style-type:none;}body{margin:10px auto;font:75%/120% Verdana,Arial, Helvetica, sans-serif;}.demo{width:400px;margin:0 auto;}.demo h2{font-size:14px;height:24px;line-height:24px;margin:30px 0 10px 0;padding:0 10px;}.menu_head{padding:5px 10px;cursor:pointer;position:relative;margin:1px;font-weight:bold;background:#eef4d3 url(images/left.png) center right no-repeat;}.menu_list .current{background:#eef4d3 url(images/down.png) center right no-repeat;}.menu_body{display:none;}.menu_body a{display:block;color:#006699;background-color:#EFEFEF;padding-left:10px;font-weight:bold;text-decoration:none;height:24px;line-height:24px;}.menu_body a:hover{color:#000000;text-decoration:underline;}</style></head><body><div target="_blank" title="jquery图片切换">jquery图片切换</a><a href="http://www.17sucai.com/" target="_blank" title="jquery幻灯片">jquery幻灯片</a><a href="http://www.17sucai.com/" target="_blank" title="jquery图片放大镜">jquery图片放大镜</a></div><p target="_blank" title="jquery动画菜单">jquery动画菜单</a><a href="http://www.17sucai.com/" target="_blank" title="jquery树形菜单">jquery树形菜单</a><a href="http://www.17sucai.com/" target="_blank" title="jquery下拉菜单">jquery下拉菜单</a></div><p target="_blank" title="jquery选项卡切换">jquery选项卡切换</a><a href="http://www.17sucai.com/" target="_blank" title="jquery滑动选项卡">jquery滑动选项卡</a><a href="http://www.17sucai.com/" target="_blank" title="jquery更多特效">jquery更多特效</a></div></div><!--firstpane end--><h2>滑过触发事件</h2><div id="secondpane" target="_blank" title="js图片切换">js图片切换</a><a href="http://www.17sucai.com/" target="_blank" title="js幻灯片">js幻灯片</a><a href="http://www.17sucai.com/" target="_blank" title="js图片放大镜">js图片放大镜</a></div><p target="_blank" title="js动画菜单">js动画菜单</a><a href="http://www.17sucai.com/" target="_blank" title="js树形菜单">js树形菜单</a><a href="http://www.17sucai.com/" target="_blank" title="js下拉菜单">js下拉菜单</a></div><p target="_blank" title="js选项卡切换">js选项卡切换</a><a href="http://www.17sucai.com/" target="_blank" title="js滑动选项卡">js滑动选项卡</a><a href="http://www.17sucai.com/" target="_blank" title="js更多特效">js更多特效</a></div></div><!--secondpane end--></div><!--demo end--></body></html>