打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

支付二维码

jQuery快速实现可折叠上下滑动效果的菜单栏

学习笔记 2016-05-09 10:45:52 95 1

【摘要】使用jQuery实现可折叠的菜单栏，在指定时间内滑动。

效果图如下：

请输入图片名称

涉及到的jQuery函数有：

next（）：找到下一个同辈元素

slideToggle（microsecond）：在指定毫秒缓慢的将元素滑上或滑下

siblings（）：找到所有的（或指定的）同辈元素

slideUp（）：通过高度（向上或者向下）隐藏元素。

核心代码是：

$(this).next("p").slideToggle("400").siblings('p:visible').slideUp('400');

完整代码：

```
<!DOCTYPE>
```
```
<html>
```
```
	<head>
```

		<title>jQuery快速实现可折叠上下滑动效果</title>

```
		<meta charset = "utf-8" />
```
```
		<style type="text/css">					
```
```
			*{
```
```
				margin:0;
```
```
				padding:0;
```
```
				font-size:12px;
```
```
			}	
```
```
			.wrap{
```
```
				width:400px;
```
```
				border:1px dotted #999;
```
```
				margin:10px auto;
```
```
				border-radius:4px;
```
```
			}
```
```
			.box{}
```
```
			.box h3{
```
```
				background-color:#EEE;
```
```
				line-height:30px;
```
```
				text-indent:2em;
```
```
				border-bottom:1px dotted #CCC;
```
```
			}
```
```
			.box p{
```
```
				text-indent:2em;
```
```
				line-height:24px;
```
```
				display:none;
```
```
			}
```
```
		</style>		
```

		<script type="text/javascript" src = "/public/home/style/js/jquery-1.8.2.min.js"></script>

```
	</head>
```
```
	<body>			
```
```
		<div class="wrap">
```
```
			<div class="box">
```
```
				<h3>心情</h3>
```
```
				<p>综述...</p>
```
```
			</div>
```
```
			<div class="box">
```
```
				<h3>说说</h3>
```
```
				<p>综述...</p>
```
```
			</div>
```
```
			<div class="box">
```
```
				<h3>相册</h3>
```
```
				<p>综述...</p>
```
```
			</div>			
```
```
		</div>
```
```
		<script type="text/javascript">
```
```
		$('.wrap h3').click(function(event) {
```

			$(this).next("p").slideToggle("400").siblings('p:visible').slideUp('400');

```
		});
```
```
		</script>
```
```
	</body>	
```
```
</html>
```

版权归马富天博客所有

本文标题：《jQuery快速实现可折叠上下滑动效果的菜单栏》

本文链接地址：http://www.mafutian.net/109.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶0

踩0

上一篇《 CSS改变鼠标滑过默认图标》下一篇《一种改进的猴子选大王算法》

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

1. JavaScript中alert()方法重写（275）2. Eclipse中...No java virtual machine was found...解决方法（254）3. jQuery中效果animate方法解决width是百分比出现的问题（237）4. input输入框绑定回车事件两种方式（208）5. 数据库SQL语句查询指定时间段内的数据（192）6. PIE解决CSS3中border-radius在IE浏览器中的兼容性（169）7. Thinkphp框架如何隐藏home模块（155）8. PHP快速入门（149）9. CSS修改默认的input标签中file（文件上传）样式（120）10. PHP微信开发快速入门（108）

1. PHP快速入门（7）2. PHP 模拟登录（3）3. php实现pjax无刷新加载页面实例（3）4. 【面试题】加号和连接符.的优先级比较（3）5. 如何使用Eclipse安装SVN插件（3）6. PHP微信开发快速入门（3）7. 搜索引擎爬虫蜘蛛的USERAGENT大全（3）8. 如何让背景图片铺满屏幕（3）9. C语言二分查找法（2）10. Windows系统如何建立远程桌面连接（2）