最近在做一个div的折叠与展开功能,在网上搜了多种方法,各有各的功能,但个人觉得有一种方法比较简洁明了,因此来总结一下——
比较关键的是一段js代码,如下:
$(document).ready(function(){
var i=$('#num').text();
$(".btn-slide1").click(function(){
$("#panel1").slideToggle("slow");
if(i%2==1){$(".btn-slide1").text("展开"); }
if(i%2==0){$(".btn-slide1").text("关闭"); }
i++;
});
});
其中,num是作为一个隐藏的span的id,btn-slide1是<a>标签的class名,panel1就是你要控制折叠与展开的div的id,类似下面一段:
<p class="slide" ><a href="javascript:;" class="btn-slide1 active1">展开</a>
<span id="num" style="display:none">2</span></p>
最后附上实现的效果图: