基于css3实现手风琴效果

　　终于在凌晨一点钟逼迫自己写博客。一直想记录自己的前端工程师之路，但毕竟拖延症晚期。因为第一篇随笔，所以多写一点废话吧。刚刚从学校毕业，放弃了一直学习的java，而想从事前端的工作。第一是觉得osgi这类的java框架实在太过笨重和繁琐，也许是真的好用，但也觉得真心不适合我。然后么，也许有点俗，前端真的能做很多华丽花哨的东西出来。到现在也工作一个月了，工资不高，老板不好，但社会毕竟不会总让人满意，没人有手把手教你成大神的话，只能自己努力了。也许会有很多弯路，但做技术的嘛，有磨练总是好事。

　　对于我个人来说，也许是信心不足吧，总是害怕自己接手的项目会出事，最害怕的就是每次有人问我，这个项目能不能做，需要多少时间。其实我觉得吧，基本所有功能都是有办法实现的，至于估计时间的话，可能还需要更多时间的磨练。大概还是害怕承担责任吧，但这也一直使我保持虚心而一直学习的状态。在快膨胀的时候提醒自己，我还有很多的不足。嘛～不管是前端还是java，完成功能时的骄傲和满足感确实使人很愉悦。

　　好了，回归正题，毕竟应届生还没有前端经验找工作简直难的一逼。机缘巧合或者也是命中注定，进入了一家7个人的创业公司。老板是抠门的富二代，这种设定也是醉，因为老板每天混，所以活少的可怜，只能自己做做公司的官网。正好也获得让自己阶段性成长的机会。于是用bootstrap框架做响应式的官网，因为年轻而且没什么经验，所以jquery真的很适合我这种刚刚出道的小菜鸡。轮播就用轮播插件，手风琴效果也可以自己用on绑定函数再用toggle实现。后来因为好强也挺好学，直接用了angular做双向数据绑定，angular简直方便。后来投资人兼主管说jquery和angular不要一起用，会分不清$符号。(投资人和那两个老板不一样，以后有机会再细说)没办法，投资人也是老板，据我所知，海康威视是jquery和angular一起玩的。不过工资在人手中，当然按人的要求来。于是用css3重写了轮播和手风琴效果，来这里记录一下，当然借鉴了网上很多的资料，然后自己也勉强实现了。

　　其实主要的思路就是利用input:checked这个伪类。先说手风琴吧，因为这个比较简单。先设置一组的input type = "radio" 并且设置相同的name值 并且与一组label标签绑定，绑定之后只要点击label就能将绑定的input的style.checked属性设置为true就是选中。此时我们用~选择器（范兄弟选择器) 比如现在红色的input标签被选中，此时用input[name=‘indexKey‘] ～ div.key-body就能调整在label被点击事蓝色部分的样式。

　　知道如何区分点击和未点击label之后的key－body样式之后我们就可以做手风琴的效果了，很简单，将key-body的初始高度设置为0，overflow属性设置为hidden，transition设置高度的平滑移动。这样在之后高度改变的情况下能模拟出滑动的效果。然后设置点击后key-body的高度为一个固定值，例如200px。这样就能看到手风琴的效果了。睡觉了，晚上下班写基于css3的轮播吧。

<ul id="indexKeyBind">
　　<li>
<input type="radio" id="indexKey1" name="indexKey" style="display:none;" checked>
　　　　<label for="indexKey1">123</label>
<div class="key-body"> 　　

　　　　　　.......

　　　　</div>
　　</li>
　　<li>
　　　　<input type="radio" id="indexKey2" name="indexKey" style="display:none;" >
　　　　<label for="indexKey2">456</label>
　　　　<div class="key-body">

　　　　</div>
　　</li>

</ul>

原文：http://www.cnblogs.com/firo/p/5747878.html