JS手風琴效果，js手風琴

JS手風琴效果，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包