导航菜单的动画效果，类似手风琴一样可伸缩的动画，以往实现起来很复杂，需要用到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
