自制淘江湖accordion

首先，端午节快乐！

然后，发泄下，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";
        });