博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。
【摘要】使用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.com/109.html
转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^
顶0
踩0
第 1 楼 小曹 2016-06-02 13:31:31 陕西西安
学习了
~
| 评论审核未开启 |
|
||
|