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

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

Untitled.gif

HTML部分

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

    

        
        Item Title
        

            
sub content
            
sub content
            
sub content
        
    
    

        
        Item Title
        

            
sub content
            
sub content
            
sub content
            
sub content
            
sub content
            
sub content
        
    

CSS部分

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

好了到这里，一个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++;
}

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

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

accordion.gif