Div+Css+JS做多个显示/隐藏内容模块

　　网(LieHuo.Net)教程 本文利用Div+Css+JS，做了多个显示/隐藏内容模块的功能。注：要引入jQuery包，我引入的是jquery-1.3.2.min.js，为了方便演示，不再将代码单独拿出来。

<title>Div+Css+JS做多个显示/隐藏内容模块-网</title><style>.mainbox h3{ margin-bottom:0px; line-height:32px;height:32px;padding-left:1em;font-size:13px;font-weight:700;border-bottom:1px solid #E6E7E1;border-top:4px solid #E8F0F7; border-left:1px solid #E8F0F7;border-right:1px solid #E8F0F7;}.mainbox{ width:880px;position:relative; margin-left:auto; margin-right:auto; margin-bottom:5px;}.headactions{position:absolute;top:12px; right:24px;line-height:1em;}.tablelist{ width: 880px; margin-left: auto; margin-right: auto; border:1px solid;}td{background:#e5f1f4;}</style><script type="text/javascript" src="http://www.wfuyu.com/uploads/userup/87/fangxl/jquery-1.3.2.min.js"></script><script type="text/javascript">//显示或隐藏内容 function toggle_collapse(objname) { var obj = $("#" + objname); if (obj) { obj.slideToggle("2000"); } var img = $("#" + objname + '_img'); if (img) { if (img.attr("src") == "http://www.wfuyu.com/uploads/userup/87/fangxl/liehuo_collapse.gif") { img.attr("src", "http://www.wfuyu.com/uploads/userup/87/fangxl/liehuo_expand.gif"); img.attr("title", "expand"); } else { img.attr("src", "http://www.wfuyu.com/uploads/userup/87/fangxl/liehuo_collapse.gif"); img.attr("title", "collapse"); img.attr("title", "collapse"); } } }</script><div class="mainbox"><span class="headactions"><img id="category_CN_img" src="http://www.wfuyu.com/uploads/userup/87/fangxl/liehuo_expand.gif" _fcksavedurl="http://www.wfuyu.com/uploads/userup/87/fangxl/liehuo_expand.gif" alt="展开/收起" onclick="toggle_collapse('category_CN');"/></span><h3 onclick="toggle_collapse('category_CN');"><a href="HTTP://www.wfuyu.com" _fcksavedurl="HTTP://www.wfuyu.com" TARGET="_BLANK">网 LIEHUO.NET</a></h3><div id="category_CN" style=" display:none;"><table class="tablelist" align="center" cellpadding="0"><tr><td>Title：网 - 关注站长，建设互联网！</td><td colspan="3"><te:TETextBox ID="txtCSTitle" runat="server" Width="380px" MaxLength="100"></te:TETextBox></td></tr><tr><td>Content：提供互联网资讯与教程，是站长、程序员、网页设计师交流的平台，多年来一直坚持为互联网的发展提供动力，热情、积极、向上、不断进取是Liehuo.Net的座右铭，关注站长，建设互联网！</td><td colspan="3"><FCKeditorV2:FCKeditor ID="txtCSContent" runat="server" Height="350px" Width="98%"></FCKeditorV2:FCKeditor></td></tr></table></div></div><br /><center>网更多教程，请访问：<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠