首页 > > 网页制作 > css >

JS手风琴效果

2018-06-24 00:20:10来源：未知阅读 ()

看了网上那么多手风琴效果的例子，觉得都好繁琐，看不下去，索性自己写了一个比较简单的。

下面是HTML

<div id="accordion">
            <ul>
                <li>
                    <div class="accordionTitle">1</div>
                    <div class="accordionMain">222</div>
                </li>
                <li>
                    <div class="accordionTitle">2</div>
                    <div class="accordionMain accordionActive">222q</div>
                </li>
                <li>
                    <div class="accordionTitle">3</div>
                    <div class="accordionMain">222dd</div>
                </li>
                <li>
                    <div class="accordionTitle">3</div>
                </li>
            </ul>
        </div>

View Code

JS代码

ul{list-style-type: none;padding: 0px;margin: 0px;}
        #accordion ul li{float:left;display: inline;}
        .accordionTitle{width:20px;height:100px;border:1px solid #000000;background-color:#FFCCFF;writing-mode:lr-tb;margin:1 auto;line-height:24px;float:left;}
        .accordionMain{margin-left: 22px;display:none;width:100px;height:100px;background-color: blue;border:1px solid #000000;}
        .accordionActive{display:block;}

View Code

直接粘贴复制就可以运行了，不过不要忘记加jQuery包

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有