<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>使用CSS实现折叠面板</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <input type="radio" id="item1" name="item"><label for="item1">Item1</label> <div class="context hiddenDiv"><span>span123span css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS</span></div> <input type="radio" id="item2" name="item"><label for="item2">Item2</label> <div class="context hiddenDiv"><span>hello world hello world hello world hello world hello world hello world hello world hello world hello world css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS</span></div> <input type="radio" id="item3" name="item"><label for="item3">Item3</label> <div class="context hiddenDiv"><span>hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world </span></div> </div> </body> </html>
*{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .container{ width:80%; height:400px; margin:0 auto; margin-top:30px; border:1px solid #dddddd; border-radius:1px; } input{ display:none; } label{ display:block; background-color: #F5F5F5; width:99%; height:40px; margin:0 auto; border:1px solid #dddddd; border-radius:2px; margin-top:5px; line-height: 40px; } .context{ width:99%; height:0px; margin:0 auto; border:1px solid #dddddd; border-radius:2px; visibility: hidden; transition:height 0.5s linear; -webkit-transition:height 0.5s linear; -moz-transition:height 0.5s linear; -ms-transition:height 0.5s linear; } input:checked + label + .context{ visibility: visible; height:150px; }
1、处理折叠和展开的动画效果时候，使用transition（过渡效果），开始隐藏div时候使用了display：none; transition没有效果，因为视图中已经没有div的物理位置，重新block后，回流和渲染，而visbility：hidden还保留其物理位置，只需要渲染就可以，transition起作用，记得以前做东西时候，经常会遇到相似的问题，但是，可能对display先入为主，总是先想到这个小玩意去隐藏元素，display会影响transition的效果，dom元素要在视图中有位置，才能进行一系列动画效果，注意这一点。
2、处理div时候用到了兄弟选择器，经试验，可以使用多个“+”选择兄弟的兄弟等。