原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果

最近学了css3的变形、过渡和动画，写了一个用css3手风琴菜单的效果，又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的，现在给大家分享一下。

1、css3实现手风琴效果

<style>
    *{
 margin: 0;padding: 0;list-style: none;}
    .box {
 width: 500px; background: #1c47ff;margin: 100px auto;}
    .box ul li h2{
 width: 500px;height: 35px;line-height: 35px;
        text-align: center;border: 1px solid #25fff5; }
    .box li:hover .txt{
 height: 300px;transition: all 1s;}
    .txt{
 overflow: hidden; height: 0;background:pink;}
</style>

<div class="box">
    <ul>
        <li>
            <h2>手风琴</h2>
            <div class="txt">内容1</div>
        </li>
        <li>
            <h2>手风琴</h2>
            <div class="txt">内容2</div>
        </li>
        <li>
            <h2>手风琴</h2>
            <div class="txt">内容3</div>
        </li</