更新列表的一種展現方式

標籤：style   color   io   java   ar   2014   div   問題   sp   

<!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;}
/*UpdateLog
----------------------------------*/
.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>

更新列表的一種展現方式