首先，端午节快乐！

然后，发泄下，gae的上传路径被墙，无法突破，所以没有demo了。。。原有的可以访问。

手风琴效果也是传统的一个效果了，jquer等js库都有原生的支持，看到淘江湖刚好有个，自己写写看。

发现个ie6 bug，border-top的颜色无法显示，要触发下haslayout。

淘宝的demo地址：http://www.taobao.com/go/act/taojianghu/score_left.php

demo地址：http://xiziyin.appspot.com/demo/accordion.html

css:

        a {text-decoration: none;}img {border-width: 0;}#accordion {width: 160px;font: 12px / 1.5 tahoma, arial, 宋体, sans-serif;border: 1px solid #DCDCDC;position: relative;margin-left: 100px;padding:1px;}#accordion h3 {color: #ff0000;padding: 0;margin: 0;font-size: 12px;line-height: 24px;height: 24px;padding-left: 8px;background-color: #F7F7F7;}#accordion ul {list-style-type: none;margin: 0;padding: 0;}#accordion li {border-top: 1px solid #DCDCDC;background-color: #F7F7F7; /*height: 25px; *//*ie6 border-top不显示*/zoom: 1;}#accordion li s {text-decoration: none;background: url("http://img04.taobaocdn.com/tps/i4/T1MCBAXotqXXXXXXXX-61-64.png") no-repeat scroll 0 0 transparent;width: 14px;height: 14px;line-height: 14px;display: block;float: left;color: #fff;text-align: center;margin: 5px 6px 0 0;}#accordion .hd {height: 25px;background-color: #F7F7F7;padding-left: 6px;}#accordion .hd a {color: #666666;cursor: pointer;line-height: 24px;}#accordion .bd {height: 62px;background-color: #fff;padding: 6px;border-top: 1px solid #DCDCDC;}#accordion .bd a {float: left;margin-right: 6px;}#accordion .bd span {word-wrap: break-word;word-break: break-all; /*line-height:20px;*/color: #666;}#accordion .bd img {border: 1px solid #DCDBD9;}.hidden {display: none;}

html:

<div id="accordion"><h3>本周兑换排行榜</h3><ul id="J_TopPrize"><li><div class="hd"><s>1</s><a>电动模型六合一</a></div><div class="bd"><a href="#"><img src="http://img02.taobaocdn.com/tps/i2/T1boBCXaJbXXXXXXXX-60-50.jpg"alt=""/></a><span>益智娱乐，动手能力强，最新款电...</span></div></li><li><div class="hd"><s>2</s><a>索尼电脑包笔记本包</a></div><div class="bd hidden"><a href="#"><img src="http://img07.taobaocdn.com/tps/i7/T1foBCXX0bXXXXXXXX-60-50.jpg"alt=""/></a><span>sony电脑包14.1寸 15.4寸......</span></div></li><li><div class="hd"><s>3</s><a>迷你USB便携音箱</a></div><div class="bd hidden"><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1oUBCXmVaXXXXXXXX-60-50.jpg"alt=""/></a><span>映世Convert101/N，适用笔记本...</span></div></li><li><div class="hd"><s>4</s><a>铁艺座钟</a></div><div class="bd hidden"><a href="#"><img src="http://img03.taobaocdn.com/tps/i3/T1woBCXkRaXXXXXXXX-60-50.jpg"alt=""/></a><span>很有特色的欧式铁艺钟表.走时准...</span></div></li><li><div class="hd"><s>5</s><a>远阳瑜伽服</a></div><div class="bd hidden"><a href="#"><img src="http://img03.taobaocdn.com/tps/i3/T1KoBCXhtaXXXXXXXX-60-50.jpg"alt=""/></a><span>远阳2010年春夏新款上市了，多买...</span></div></li></ul>
</div>

js(yui):

var topPrize = YAHOO.util.Dom.get("J_TopPrize");var topLi = topPrize.getElementsByTagName("li");YAHOO.util.Event.on(topLi, "mouseover", function() {for (var i = 0; i < topLi.length; i++) {YAHOO.util.Dom.getElementsByClassName("bd", "div", topLi[i])[0].className = "bd hidden";}YAHOO.util.Dom.getElementsByClassName("bd", "div", this)[0].className = "bd";});