这个手风琴效果还可以再精简一下或者升级一下，这个就后期再说吧，使用的方法在最下方。
希望看见的人点赞一下。
手风琴代码如下：
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<ul class="js_accordion clearfix">
<li>
<a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
<h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
</li>
<li>
<a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
<h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
</li>
<li>
<a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
<h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
</li>
<li>
<a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
<h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
</li>
<li>
<a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
<h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
</li>
</ul>
<style type="text/css">
body,ul,li{margin:0; padding:0; outline:none;}
a:focus{-moz-outline-style:none;}
a:focus{outline:none;}
ul,ol{list-style:none;}
a{text-decoration:none;}
/*正式css代码*/
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{display:inline-block; display:block; zoom:1;}
.js_accordion{ width:810px; margin:30px auto;}
.js_accordion li{ float:left; overflow:hidden; position:relative; border:1px solid #999;}
.js_accordion,.js_accordion li{ height:450px;}
function(){ //跟单：www.gendan5.com
.js_accordion li h3{ position:absolute; bottom:0; left:0; z-index:3; width:100%; height:50px; line-height:60px; text-align:center; font-size:14px;}
.js_accordion li h3 a{ display:block; padding:0 10px; overflow:hidden; color:#fff;}
</style>
<script type="text/javascript">
$(document).ready(function () {
function sdaasdsd(cgl_wmax,cgl_wminx,cgl_itemli,cgl_wonx){
var cgl_wmax = cgl_wmax;//最大宽度
var cgl_wmin = cgl_wminx;//最小宽度
var cgl_won = cgl_wonx;//默认展开的0开始
$js_item = $(cgl_itemli);
$js_item.css('width',cgl_wmin)
$js_item.eq(cgl_won).css('width',cgl_wmax)
$js_item.hover(function () {
var asd1 = $(this);
var asd2 = $(this).siblings();
timeer = setTimeout(function () {
asd2.stop(false,true).animate({'width':cgl_wmin},400);
asd1.stop(false,true).animate({'width':cgl_wmax},400);
},200);
},function () {
clearTimeout(timeer)
});
}
/**
* 最大宽度：cgl_wmax --->例子：'320px'
* 最小宽度：cgl_wminx --->例子：'120px'
* 默认展开：cgl_wonx --->例子：'.js_accordion li'
* 活动子级：cgl_itemli --->例子：3
* sdaasdsd('cgl_wmax','cgl_wminx','cgl_itemli',cgl_wonx)
* 代码来自：http://cenggel.com/js/31.html
* */
sdaasdsd('320px','120px','.js_accordion li',3)
});
</script>