jQuery 竖直手风琴菜单收缩展示下拉菜单-20130725
程序员文章站
2022-07-12 21:29:12
...
1、效果及功能说明
框架制作两种非常简单的jquery手风琴菜单特效，鼠标滑过手风琴与鼠标点击触发手风琴
2、实现原理
手风琴的效果一个是点击事件的效果一个触碰效果，都是当点击获得触碰触发添加一个让得显示的类后获得一个滑动效果让子类出现，当再次点击获得点击其他，和触及消失获得触及其他后当前的就会自动滑动消失，在删除掉展示的类
主要的方法
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
框架制作两种非常简单的jquery手风琴菜单特效，鼠标滑过手风琴与鼠标点击触发手风琴
2、实现原理
手风琴的效果一个是点击事件的效果一个触碰效果，都是当点击获得触碰触发添加一个让得显示的类后获得一个滑动效果让子类出现，当再次点击获得点击其他，和触及消失获得触及其他后当前的就会自动滑动消失，在删除掉展示的类
主要的方法
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
//添加类，后查询每一个元素的下一个元素div.menu_body开展然后定义一个滑动效果里面包含显示和隐藏，在查询当前里面包裹的其他元素，让他们全部通过滑动效果隐藏起来
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!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 class="demo">
<h2>点击触发事件</h2>
<div id="firstpane" class="menu_list">
<p class="menu_head current">jquery图片特效</p>
<div class="menu_body">
<a href="http://www.17sucai.com/" 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 class="menu_head">jquery导航菜单</p>
<div class="menu_body">
<a href="http://www.17sucai.com/" 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 class="menu_head">jquery选项卡特效</p>
<div class="menu_body">
<a href="http://www.17sucai.com/" 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" class="menu_list">
<p class="menu_head current">js图片特效</p>
<div class="menu_body">
<a href="http://www.17sucai.com/" 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 class="menu_head">js导航菜单</p>
<div class="menu_body">
<a href="http://www.17sucai.com/" 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 class="menu_head">js选项卡特效</p>
<div class="menu_body">
<a href="http://www.17sucai.com/" 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>
- images.rar (852 Bytes)
- 下载次数: 50
上一篇： 表格鼠标经过时变色