js方法：
ps:因js方法通过class获取DOM对象需要额外函数，故使用Id获取DOM对象，所以只有第一个栏目有效，但不影响理解其原理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>折叠栏目</title> <style type="text/css"> body { background-color: #FFF; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .main { width: 960px; margin-right: auto; margin-left: auto; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #c2d5e3; border-left-color: #c2d5e3; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #c2d5e3; margin-top: 30px; font-size: 12px; color: #000; } #divOne { width: 960px; height: 260px; overflow: hidden; } .main .one1 { background-color: #eef3f6; height: 30px; width: 960px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #c2d5e3; border-bottom-color: #c2d5e3; line-height: 30px; } .main .one1 a { font-size: 13px; font-weight: bold; color: #336699; text-decoration: none; margin-left: 10px; display: block; float: left; } .main .one1 a:hover { text-decoration: underline; } #oneButton { background: url(3.png); /* background-repeat: no-repeat;*/ /*background-position:0px -20px;*/ display: block; float: right; height: 20px; width: 20px; margin-top: 5px; margin-right: 10px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } .styleOne { float: left; height: 75px; width: 280px; background-image: url(4.png); background-repeat: no-repeat; background-position: 0px -60px; padding-left: 40px; line-height: 18px; } .styleOne a { font-weight: bold; color: #000; text-decoration: none; } .styleOne a:hover { text-decoration: underline; } .styleTwo { float: left; height: 75px; width: 280px; background-image: url(4.png); background-repeat: no-repeat; background-position: 0px 0px; padding-left: 40px; line-height: 18px; } .styleTwo a { font-weight: bold; color: #000; text-decoration: none; } .styleTwo a:hover { text-decoration: underline; } .main #divOne .one2 { height: 75px; width: 960px; } .main #divOne .one3 { height: 75px; width: 960px; border-top-width: 1px; border-top-style: dashed; border-top-color: #cdcdcd; } .main #divOne .one4 { height: 75px; width: 960px; border-top-width: 1px; border-top-style: dashed; border-top-color: #cdcdcd; } .main #divTwo { height: 330px; width: 960px; } .main #divTwo .two1 { height: 30px; width: 960px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #c2d5e3; border-bottom-color: #c2d5e3; background-color: #eef3f6; } .main #divTwo .two2 { height: 75px; width: 960px; } .main #divTwo .two3 { height: 75px; width: 960px; border-top-width: 1px; border-top-style: dashed; border-top-color: #cdcdcd; } .main #divTwo .two4 { height: 75px; width: 960px; border-top-width: 1px; border-top-style: dashed; border-top-color: #cdcdcd; } .main #divTwo .two5 { height: 75px; width: 960px; border-top-width: 1px; border-top-style: dashed; border-top-color: #cdcdcd; } </style> <!--脚本--> <script type="text/javascript"> window.onload = function(){ //获取样式 function getStyle(obj,attr){ if (document.all) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,null)[attr]; } } //获取对象 var oneButton = document.getElementById("oneButton"); var divOne = document.getElementById("divOne"); //点击收起再次点击展开 oneButton.onclick = function(){ var heights = parseInt(getStyle(divOne,"height")); if (heights==30) { var a1a =setInterval(function(){ heights+=10; divOne.style.height = heights+"px"; if (heights==260) { clearInterval(a1a); oneButton.style.background="url(3.png)"; } },30) } else { var b1b =setInterval(function(){ heights-=10; divOne.style.height = heights+"px"; if (heights==30) { clearInterval(b1b); oneButton.style.background="url(2.png)"; } },30) } } } </script> </head> <body> <div class="main"> <div id="divOne"> <div class="one1"><a href="#">Discuz! 交流与讨论</a><input name="" type="button" id="oneButton"/></div> <div class="one2"> <div class="styleOne"><a href="#">Discuz!-发展建议</a> (33) <br/> 主题: 9, 帖数: 1073<br/> 最后发表: 3 小时前 </div> <div class="styleTwo"><a href="#">Discuz!-安装使用</a> (13) <br/> 主题: 145, 帖数: 41935<br/> 最后发表: 半小时前 </div> <div class="styleOne"> <a href="#">Discuz!-模板风格</a><br/> 主题: 11, 帖数: 8733<br/> 最后发表: 5 天前 </div> </div> <div class="one3"> <div class="styleOne"><a href="#">Discuz!-BUG反馈</a> <br/> 主题: 10, 帖数: 10950<br/> 最后发表: 昨天 19:01 </div> <div class="styleTwo"><a href="#"> Discuz!-插件Hack</a> (3) <br/> 主题: 25, 帖数: 21141<br/> 最后发表: 15 分钟前 </div> <div class="styleOne"> <a href="#">掌上论坛</a>(3) <br/> 主题: 52, 帖数: 38065<br/> 最后发表: 5 小时前 </div> </div> <div class="one4"> <div class="styleOne"><a href="#">Discuz!-数据转换</a> <br/> 主题: 10, 帖数: 10950<br/> 最后发表: 昨天 19:01 </div> <div class="styleOne"><a href="#">Discuz!-商业服务支持</a> (7)<br/> 主题: 6, 帖数: 411<br/> 最后发表: 15 小时前 </div> <div class="styleOne"> <a href="#">应用中心</a> (6) <br/> 主题: 7, 帖数: 1251<br/> 最后发表: 7 小时前 </div> </div> </div> <div id="divTwo"> <div class="one1"><a href="#">Discuz! 交流与讨论</a><input name="" type="button" id="oneButton"/></div> <div class="one2"> <div class="styleOne"><a href="#">Discuz!-发展建议</a> (33) <br/> 主题: 9, 帖数: 1073<br/> 最后发表: 3 小时前 </div> <div class="styleTwo"><a href="#">Discuz!-安装使用</a> (13) <br/> 主题: 145, 帖数: 41935<br/> 最后发表: 半小时前 </div> <div class="styleOne"> <a href="#">Discuz!-模板风格</a><br/> 主题: 11, 帖数: 8733<br/> 最后发表: 5 天前 </div> </div> <div class="one3"> <div class="styleOne"><a href="#">Discuz!-BUG反馈</a> <br/> 主题: 10, 帖数: 10950<br/> 最后发表: 昨天 19:01 </div> <div class="styleTwo"><a href="#"> Discuz!-插件Hack</a> (3) <br/> 主题: 25, 帖数: 21141<br/> 最后发表: 15 分钟前 </div> <div class="styleOne"> <a href="#">掌上论坛</a>(3) <br/> 主题: 52, 帖数: 38065<br/> 最后发表: 5 小时前 </div> </div> <div class="one4"> <div class="styleOne"><a href="#">Discuz!-数据转换</a> <br/> 主题: 10, 帖数: 10950<br/> 最后发表: 昨天 19:01 </div> <div class="styleOne"><a href="#">Discuz!-商业服务支持</a> (7)<br/> 主题: 6, 帖数: 411<br/> 最后发表: 15 小时前 </div> <div class="styleOne"> <a href="#">应用中心</a> (6) <br/> 主题: 7, 帖数: 1251<br/> 最后发表: 7 小时前 </div> </div> </div> </div> </body> </html>
图片：
基本原理：
1.给按钮添加点击事件
2.之后判断栏目的高度，如果高度是最低的30，就使高度增加，反正亦然
3.达到最低或者最高值时，改变按钮的背景
希望对你有所帮助！^_^~
效果图：
jquery方法：
ps:成熟方法，可以实现每个栏目的折叠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>折叠栏目</title> <style type="text/css"> body { background-color: #FFF; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .main { width: 960px; margin-right: auto; margin-left: auto; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #c2d5e3; border-left-color: #c2d5e3; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #c2d5e3; margin-top: 30px; font-size: 12px; color: #000; } .divOne { width: 960px; height: 260px; overflow: hidden; } .main .one1 { background-color: #eef3f6; height: 30px; width: 960px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #c2d5e3; border-bottom-color: #c2d5e3; line-height: 30px; } .main .one1 a { font-size: 13px; font-weight: bold; color: #336699; text-decoration: none; margin-left: 10px; display: block; float: left; } .main .one1 a:hover { text-decoration: underline; } .oneButton { background: url(3.png); /* background-repeat: no-repeat;*/ /*background-position:0px -20px;*/ display: block; float: right; height: 20px; width: 20px; margin-top: 5px; margin-right: 10px; border: none; } .styleOne { float: left; height: 75px; width: 280px; background-image: url(4.png); background-repeat: no-repeat; background-position: 0px -60px; padding-left: 40px; line-height: 18px; } .styleOne a { font-weight: bold; color: #000; text-decoration: none; } .styleOne a:hover { text-decoration: underline; } .styleTwo { float: left; height: 75px; width: 280px; background-image: url(4.png); background-repeat: no-repeat; background-position: 0px 0px; padding-left: 40px; line-height: 18px; } .styleTwo a { font-weight: bold; color: #000; text-decoration: none; } .styleTwo a:hover { text-decoration: underline; } .main .divOne .one2 { height: 75px; width: 960px; } .main .divOne .one3 { height: 75px; width: 960px; border-top-width: 1px; border-top-style: dashed; border-top-color: #cdcdcd; } .main .divOne .one4 { height: 75px; width: 960px; border-top-width: 1px; border-top-style: dashed; border-top-color: #cdcdcd; } </style> <!--脚本--> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".oneButton").each(function(i){ $(this).click(function(){ var heights = $($(".divOne")[i]).height(); if(heights<=30){ var move1 = setInterval(function(){ heights+=10; $($(".divOne")[i]).height(heights); if(heights>=260){ clearInterval(move1); $($(".oneButton")[i]).css("background","url(./3.png)"); } },30) }else{ var move2 = setInterval(function(){ heights-=10; $($(".divOne")[i]).height(heights); if(heights<=30){ clearInterval(move2); $($(".oneButton")[i]).css("background","url(./2.png)"); } },30) } }) }) }) </script> </head> <body> <div class="main"> <div class="divOne"> <div class="one1"><a href="#">Discuz! 交流与讨论</a><input name="" type="button" class="oneButton"/></div> <div class="one2"> <div class="styleOne"><a href="#">Discuz!-发展建议</a> (33) <br/> 主题: 9, 帖数: 1073<br/> 最后发表: 3 小时前 </div> <div class="styleTwo"><a href="#">Discuz!-安装使用</a> (13) <br/> 主题: 145, 帖数: 41935<br/> 最后发表: 半小时前 </div> <div class="styleOne"> <a href="#">Discuz!-模板风格</a><br/> 主题: 11, 帖数: 8733<br/> 最后发表: 5 天前 </div> </div> <div class="one3"> <div class="styleOne"><a href="#">Discuz!-BUG反馈</a> <br/> 主题: 10, 帖数: 10950<br/> 最后发表: 昨天 19:01 </div> <div class="styleTwo"><a href="#"> Discuz!-插件Hack</a> (3) <br/> 主题: 25, 帖数: 21141<br/> 最后发表: 15 分钟前 </div> <div class="styleOne"> <a href="#">掌上论坛</a>(3) <br/> 主题: 52, 帖数: 38065<br/> 最后发表: 5 小时前 </div> </div> <div class="one4"> <div class="styleOne"><a href="#">Discuz!-数据转换</a> <br/> 主题: 10, 帖数: 10950<br/> 最后发表: 昨天 19:01 </div> <div class="styleOne"><a href="#">Discuz!-商业服务支持</a> (7)<br/> 主题: 6, 帖数: 411<br/> 最后发表: 15 小时前 </div> <div class="styleOne"> <a href="#">应用中心</a> (6) <br/> 主题: 7, 帖数: 1251<br/> 最后发表: 7 小时前 </div> </div> </div> <div class="divOne"> <div class="one1"><a href="#">Discuz! 交流与讨论</a><input name="" type="button" class="oneButton"/></div> <div class="one2"> <div class="styleOne"><a href="#">Discuz!-发展建议</a> (33) <br/> 主题: 9, 帖数: 1073<br/> 最后发表: 3 小时前 </div> <div class="styleTwo"><a href="#">Discuz!-安装使用</a> (13) <br/> 主题: 145, 帖数: 41935<br/> 最后发表: 半小时前 </div> <div class="styleOne"> <a href="#">Discuz!-模板风格</a><br/> 主题: 11, 帖数: 8733<br/> 最后发表: 5 天前 </div> </div> <div class="one3"> <div class="styleOne"><a href="#">Discuz!-BUG反馈</a> <br/> 主题: 10, 帖数: 10950<br/> 最后发表: 昨天 19:01 </div> <div class="styleTwo"><a href="#"> Discuz!-插件Hack</a> (3) <br/> 主题: 25, 帖数: 21141<br/> 最后发表: 15 分钟前 </div> <div class="styleOne"> <a href="#">掌上论坛</a>(3) <br/> 主题: 52, 帖数: 38065<br/> 最后发表: 5 小时前 </div> </div> <div class="one4"> <div class="styleOne"><a href="#">Discuz!-数据转换</a> <br/> 主题: 10, 帖数: 10950<br/> 最后发表: 昨天 19:01 </div> <div class="styleOne"><a href="#">Discuz!-商业服务支持</a> (7)<br/> 主题: 6, 帖数: 411<br/> 最后发表: 15 小时前 </div> <div class="styleOne"> <a href="#">应用中心</a> (6) <br/> 主题: 7, 帖数: 1251<br/> 最后发表: 7 小时前 </div> </div> </div> </div> </body> </html>