看了网上那么多手风琴效果的例子，觉得都好繁琐，看不下去，索性自己写了一个比较简单的。
下面是html
div id=accordion> ul> li> div class=accordiontitle>1div> div class=accordionmain>222div> li> li> div class=accordiontitle>2div> div class=accordionmain accordionactive>222qdiv> li> li> div class=accordiontitle>3div> div class=accordionmain>222dddiv> li> li> div class=accordiontitle>3div> 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包