实现思路

1.创建容器Accordion 设置宽高。

2.容器里面创建一个列表 给ul设置弹性盒子 使li一排显示（也可以使用左浮动） 列表里放三张图片。

3.给li设置宽高 图片设置宽100%（目的继承li的宽） 使其图片占满父盒子（即手风琴静态样式）。

4.给li增加点击事件 通过动画改变li的宽度达到手风琴的效果。

代码

1.css

	        * {
	          margin: 0px;
                  padding: 0px;
	          list-style: none;
	           }

	.Accordion {
	            width: 900px;
	            height: 440px;
	            margin: 0px auto;
		   }

		ul {
		    width: 100%;
		    display: flex;
		    overflow: hidden;
		    }

		ul li{
		     width: 150px;
		      height: 440px;
		      }
		ul li img{
		      width:100%;
		       height: 440px;
			}
ul li:nth-of-type(2){
	             width: 600px;
		     }

2.html

              <div class="Accordion">
			<ul>
				<li><img src="img/1.jpeg"></li>
				<li><img src="img/1.jpeg"></li>
				<li><img src="img/1.jpeg"></li>
			</ul>
		</div>

3.js

		$(function(){
			$(‘li‘).click(function(){
				    $(this).animate({width:‘600px‘},300).siblings().animate({width:‘150px‘},300);
				})
		})

手风琴