花开花谢，人来又走，夕阳西下，人去楼空，早已物是人非矣。也许，这就是结局，可我不曾想过结局是这样;也许，这就是人生的意义，可我不曾想竟是生离死别。
这是一个简单的折叠框效果实现，核心内容jQ库里的slideToggle()方法
效果图如下：
css代码：
.con_ul{
padding: 0;
margin: 0;
overflow: auto;
}
.con_ul li{
list-style: none;
padding: 10px;
margin: 0;
border-bottom: 1px solid #CCCCCC;
}
.con_ul li .title{
padding-right: 20px;
background-image: url(images/drop_1fcaf417.png);//默认的背景
background-position: 100% 0px;
background-repeat: no-repeat;
}
.con_ul li .title.act{
padding-right: 20px;
background-image: url(images/top.png);//展开后的背景
background-position: 100% 0px;
background-repeat: no-repeat;
}
.con{
background-color: #F4F4F4;
display: none;//内容本分默认隐藏
padding: 5px;
margin: 10px 0;
}
html代码：使用ul li的布局本菜认为代码结构更简洁清晰
<ul class="con_ul"> <li> <div class="title"> 标题 </div> <div class="con"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </li> <li> <div class="title"> 标题 </div> <div class="con"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </li> <li> <div class="title"> 标题 </div> <div class="con"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </li> </ul>
javascript代码：
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script>
$('.con_ul li .title').click(function(){
$(this).toggleClass('act');//获取当前点击对象，切换act类，达到切换背景箭头的效果
$(this).next().slideToggle();/获取当前点击对象的下一个兄弟级，实现折叠效果切换
})
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！