威斯尼斯人官网JS手风琴效果,js手风琴

JS手风琴效果,js手风琴

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

下面是HTML

威斯尼斯人官网 1<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代码

威斯尼斯人官网 2ul{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包

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章