你的位置:首页 > 网页设计

[网页设计]JS手风琴效果


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

下面是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包