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

xjwolaile

浏览: 341054 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

jQuery
学习
前端技术

show next addClass slideUp siblings

1、效果及功能说明

框架制作两种非常简单的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

查看图片附件

分享到：

jQuery 侧栏与工具提示-20130726 | jQuery 倒计时设置几天、小时、分钟、秒 ...

2013-07-25 23:40
浏览 6595
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>