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

学习笔记 马富天 2016-05-09 10:45:52 85 1

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

效果图如下:

请输入图片名称

涉及到的jQuery函数有:

next():找到下一个同辈元素

slideToggle(microsecond):在指定毫秒缓慢的将元素滑上或滑下

siblings():找到所有的(或指定的)同辈元素

slideUp():通过高度(向上或者向下)隐藏元素。

核心代码是:

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

完整代码:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>jQuery快速实现可折叠上下滑动效果</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			*{
  8. 				margin:0;
  9. 				padding:0;
  10. 				font-size:12px;
  11. 			}	
  12. 			.wrap{
  13. 				width:400px;
  14. 				border:1px dotted #999;
  15. 				margin:10px auto;
  16. 				border-radius:4px;
  17. 			}
  18. 			.box{}
  19. 			.box h3{
  20. 				background-color:#EEE;
  21. 				line-height:30px;
  22. 				text-indent:2em;
  23. 				border-bottom:1px dotted #CCC;
  24. 			}
  25. 			.box p{
  26. 				text-indent:2em;
  27. 				line-height:24px;
  28. 				display:none;
  29. 			}
  30. 		</style>		
  31. 		<script type="text/javascript" src = "/public/home/style/js/jquery-1.8.2.min.js"></script>
  32. 	</head>
  33. 	<body>			
  34. 		<div class="wrap">
  35. 			<div class="box">
  36. 				<h3>心情</h3>
  37. 				<p>综述...</p>
  38. 			</div>
  39. 			<div class="box">
  40. 				<h3>说说</h3>
  41. 				<p>综述...</p>
  42. 			</div>
  43. 			<div class="box">
  44. 				<h3>相册</h3>
  45. 				<p>综述...</p>
  46. 			</div>			
  47. 		</div>
  48. 		<script type="text/javascript">
  49. 		$('.wrap h3').click(function(event) {
  50. 			$(this).next("p").slideToggle("400").siblings('p:visible').slideUp('400');
  51. 		});
  52. 		</script>
  53. 	</body>	
  54. </html>

版权归 马富天PHP博客 所有

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

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

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

0

0

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

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码