模拟展开折叠的一个更新日志插件
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body{ color: #555; font-size:14px; line-height:1.7;min-width:1180px; margin:0;} .tnc-attchment-dailog {font-size:12px !important; line-height: 13px !important;} a{ color:#333;text-decoration:none; } a:hover{cursor:pointer; color:#3a9ce7; text-decoration:none; transition:color 0.2s ease-in;} .tn-doc-bg { background: #f4f4f4; } .tn-content-bg { } h1,h2,h3,h4,h5,h6{ font-weight:normal;} li{list-style:none;} ul{margin:0;padding:0;} .component-changelog .contentpaneopen{margin-left:361px;margin-bottom:50px;} .history{background:url(../line04.gif) repeat-y 187px 0;} .history-date h2{background:url(../icon06.jpg) no-repeat 158px 0;height:59px;font-size:25px;font-weight:normal;padding-left:45px;cursor:pointer;margin-bottom:10px;} .history-date h2.first{margin-top:0;} .history-date h2 a{color:#00bbff;display:inline-block;*display:inline;zoom:1;background:url(../icon08.gif) no-repeat right 50%;padding-right:17px;margin:10px 10px 0 0;} .history-date h2 a:hover{text-decoration:none;} .history-date ul{display:block;} .history-date ul li{background:url(../icon07.jpg) no-repeat 180px 50px;padding:20px 0 0;zoom:1;} .history-date ul li:after{content:" ";display:block;height:0;clear:both;visibility:hidden;} .history-date ul li h3{float:left;width:168px; _width:150px;text-align:right;padding-right:19px;color:#c3c3c3;font:normal 18px/16px Arial;cursor:pointer;margin-top:30px;} .history-date ul li h3 span{display:block;color:#d0d0d0;font-size:12px;} .history-date ul li dl{float:left;padding-left:41px;width:500px;padding-top: 26px;} .history-date ul li dl dt{font-size:18px;line-height:24px;cursor:pointer;} .history-date ul li dl dd{font-size:12px;padding-top:20px;color:#5A5A5A;line-height: 1.8em;} .history-date ul li.green h3{color:#1db702;} .history-date ul li.green h3 span{color:#a8dda3;} .history-date ul li.green dl dd p{overflow:hidden;zoom:1;line-height:21px;color:#787878;} .history-date h2.first .more-history{font-size:16px;background:transparent;margin-left:30px;} </style> </head> <script src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> //更新日志 jQuery.fn.slideFadeToggle = function (speed, easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, speed, easing, callback); }; $(function () { if (!$(".history").length) { return; } var $warpEle = $(".history-date"); $warpEle.find("h2").click(function () { $(this).siblings().slideFadeToggle(); }); $warpEle.find("h3").click(function () { $(this).next().find('dd').slideFadeToggle('slow'); }); $warpEle.find("dt").click(function () { $(this).next().slideFadeToggle('slow'); }); }); </script> <body> <div class="lx-container"> <div class="component-changelog"> <div class="contentpaneopen"> <div class="history"> <div class="history-date"> <h2 class="first"><a href="#nogo">2014年</a></h2> <ul class="first"> <li class="green"> <h3>8.1<span>2014</span></h3> <dl> <dt>v2.0</dt> <dd><span>1.xxxxxx<br /> 2. xxxxxx<br /> 3. xxxxxx<br /> </span></dd> </dl> </li> <li> <h3>02.28<span>2014</span></h3> <dl> <dt>v1.0.39</dt> <dd><span>1. 功能增强:HTML编辑器中增加插入代码片段的功能<br /> 2. 功能增强:HTML编辑器增加显示页面源代码功能<br /> 3. 体验改进:给异步加载的页面增加等待效果<br /> </span></dd> </dl> </li> <li> <h3>02.26<span>2014</span></h3> <dl> <dt>v1.0.36</dt> <dd><span>1. 功能增强:提高了前端页面的运行效率,解决了IE8浏览器下部分页面响应慢的问题<br /> 2. 功能增强:后台圈子管理增加按部门搜索的功能<br /> 3. 体验改进:调整知识库页面知识树的排序<br /> </span></dd> </dl> </li> </ul> </div> <div class="history-date"> <h2><a href="#nogo">2013年</a></h2> <ul> <li> <h3>12.27<span>2013</span></h3> <dl> <dt>v1.0.0</dt> <dd><span>1.我和我的小伙伴们都惊呆了! </span></dd> </dl> </li> </ul> </div> </div> </div> </div> </div> </body> </html>
附录图片