Jquery的折叠效果

OECOM

发布于 2020-07-01 17:32:17

3.8K0

发布于 2020-07-01 17:32:17

文章被收录于专栏：OECOM

2015-12-01 16:50:08

在进行web前端开发中，会有一些关于介绍的页面，在这些页面里有类似名词解释的，如果直接将解释和名词放在页面上就会使整个页面显得东西凌乱，且不易于查看自己需要的名词，这时可以用到折叠的方式来解决。即点击名词，将名词的解释展开，再次点击名词，名词解释合上。下面我来说说通过jquery来实现折叠效果，来看代码：

<!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为合上和展开后执行的方法

合上时的效果图