自制淘江湖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";

        });