2015-12-01 16:50:08
在进行web前端开发中，会有一些关于介绍的页面，在这些页面里有类似名词解释的，如果直接将解释和名词放在页面上就会使整个页面显得东西凌乱，且不易于查看自己需要的名词，这时可以用到折叠的方式来解决。即点击名词，将名词的解释展开，再次点击名词，名词解释合上。下面我来说说通过jquery来实现折叠效果，来看代码：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
//$(".panel").slideDown("slow");这种方式是点击使panel下拉。但再次点击不会合上
//$(".panel").slideToggle("slow");这种方式可以点击下拉，再次点击合上
$(".panel").toggle("slow");//这种方式panel会从左侧拉出，再次点击从左侧退出
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>落帆亭专注于web前端开发站点</p>
<p>落帆亭网址为：https://www.oecom.cn欢迎您的访问</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>$(".panel").toggle(speed,callback)，其中speed为展开与合上的速度，可以是fast，slow也可以是毫秒，callback为合上和展开后执行的方法
合上时的效果图
展开时的效果图
有兴趣的朋友可以试试。
