这是折叠框效果的简单实现，核心内容是jQ库中的slideToggle()方法

效果图如下：

Css代码：con _ ul { padd : 0；margin : 0；飞越：汽车；} .con_ul li{ list-style:无；padding: 10pxmargin : 0；border-bottom: 1px实心# CCCCCC；} .con ul Li。title { padding-right : 20px；background-image : URL(images/drop _ 1 fcaf 417 . png)；//默认背景-位置： 100% 0px；背景-重复：不重复；} .con _ ul Li . title . act { padding-right : 20px；背景-image : URL(images/top . png)；//扩展背景-位置： 100% 0px；背景-重复：不重复；} .con { background-color : # F4F 4；display:无；//padd : 5px在内容子部分默认隐藏；margin : 10px 0；}html代码：使用ul li的布局，这道菜认为代码结构更简单清晰

ul class=' con _ ul ' Li div class=' title ' title/div class=' con ' Content Content Content Content Content Content Content Content/div/Li Li div class=' title ' title/div class=' con ' Content Content Content Content Content Content Content Content Content/div/Li div class=' title ' title/div class=' con ' Content Content Content Content Content Content Content Content Content Content Content Content Content内容/div /li /uljavascript代码：

脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 10 . 1 . min . js '/script script $('。con ul Li。标题')。单击(function(){ $(this))。toggle class(' act ')；//获取当前点击的对象，切换act类，达到切换背景箭头$(this)的效果。下一个()。slide Toggle()；/获取当前被点击对象的下一个兄弟并切换折叠效果})/脚本以上就是本文的全部内容。希望这篇文章的内容能给大家的学习或工作带来一些帮助，也希望大家多多支持我们！