html产品折叠效果图,Jquery的折叠效果

2015-12-01 16:50:08

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

(document).ready(function(){(".flip").click(function(){

//(".panel").slideDown("slow");这种方式是点击使panel下拉。但再次点击不会合上

//(".panel").slideToggle("slow");这种方式可以点击下拉，再次点击合上

$(".panel").toggle("slow");//这种方式panel会从左侧拉出，再次点击从左侧退出

});

});

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

落帆亭专注于web前端开发站点

落帆亭网址为：https://www.oecom.cn欢迎您的访问

请点击这里

$(".panel").toggle(speed,callback)，其中speed为展开与合上的速度，可以是fast，slow也可以是毫秒，callback为合上和展开后执行的方法

合上时的效果图

展开时的效果图

有兴趣的朋友可以试试。