使用CSS实现类似手风琴的菜单展开效果

导航菜单的动画效果，类似手风琴一样可伸缩的动画，以往实现起来很复杂，需要用到jquery的toggle()，或者自己写动画实现。
这里展示一份简洁的使用css3动画实现的手风琴菜单效果。

Untitled.gif

HTML部分

• 这里使用了<input>[radio]触发菜单展开。
• label标签作为菜单项，使用for属性指向<input>[radio];当我们点击label标签的时候，实际上是点击到了id="ac-1"的<input>[radio]标签。

<section class="accordion">
    <div>
        <input id="ac-1" name="ac-radio" type="radio" onclick="doAccordion(this)">
        <label for="ac-1">Item Title</label>
        <div class="sub-content">
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
        </div>
    </div>
    <div>
        <input id="ac-2" name="ac-radio" type="radio" onclick="doAccordion(this)">
        <label for="ac-2">Item Title</label>
        <div class="sub-content">
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
        </div>
    </div>
</section>

CSS部分

• 在.sub-content中设置transition：height 0.4s ease-in-out;作为菜单展开的动画效果。
• 当点击了Item Title选中了某项个菜单时，展开的菜单高度height: 140px;就会生效，产生动画效果。

<style>
    .accordion {
        position: relative;
        width: 100px;
    }
    
    .accordion input {
        display: none;
    }
    
    .accordion .sub-content{
        overflow: hidden;
        height: 0px;
        transition: height 0.4s ease-in-out;
        background-color: #F5F5F5;
    }
    
    .accordion input:checked~.sub-content {
        height: 140px;
    }
</style>

好了到这里，一个css的手风琴菜单效果就完成了。

但是这里设置的菜单展开高度是一个固定值，有时候我们需要根据菜单内容的不同来展开不同的高度，这样就需要加入JS代码，对DOM进行操作。

使用querySelector()方法选择到菜单展开区域，并获取到它的scrollHeight属性值，赋给该区域对象的高度属性。

var openSubContent = self.parentNode.querySelector(".sub-content")
openSubContent.style.height = openSubContent.scrollHeight+"px";

同时，别忘了在高度赋值的代码前面，将所有的展开区域的高度重置为0，否则会造成所有的菜单都展开而无法关闭了。

var allSubContent = document.querySelector(".accordion")
    .querySelectorAll(".sub-content");
var i = 0;
while(i < allSubContent.length) {
    allSubContent[i].style.height = 0;
    i++;
}

另外，由于<input>[radio]标签选中以后，再次点击不能取消checked状态，所以我们就需要自己使用JS代码做一个控制，这里就不再赘述。

最后，展示一下上面代码的简易效果

accordion.gif