论如何制作手风琴

这次我们要制作的是一个垂直的下拉框，这种下拉框一帮在电影院比较常见。

这就是我们今天要制作出来的效果。今天要用到JavaScript的动态添加标签的效果，所以我们的布局基本不怎么需要。简单的使用一个div标签包裹一个h2标签作为标题和一个ul标签就可以了。同时给div标签和h2标签一个类，用于添加CSS样式，ul标签则给一个ID。因为后面需要使用JavaScript进行动态添加标签所以我们要给ul标签一个ID方便查找。

CSS样式我们先给一个*号键。*号代表的是选择整张网页。一帮网页都会自动生成一定的内边距和外边距。所以使用一个*号选择整个网页将外边距和内边距清零。

给div标签的类一个宽度，这个宽度需要下一张图片同时也要能放下大量的文本。大概600px就够了。然后我们在给一个外边距，上下边距大概为30个px左右边距居中。然后给一个实线的边框。这样div的样式就设置完成了。

接着就是h2标签的样式，h2标签作为标题标签，也需要居中效果，但是因为它被div标签包裹着所以，我们并不需要设置他的外边距。我们只要给他的内边距个像素就可以了，让它跟下面的li标签有个距离就够了。同时也设置一下它的字体颜色。

*{
	margin: 0;
	padding: 0;
}
.container{
            width:600px;
			margin: 30px auto 0;
			border:1pxsolid #ccc;
	}
.title{
		padding:10px;
		color: #F8BFBF;
	}

现在我们要设置等下要添加的标签的样式

我们先选择到ul标签中的li标签，先去除无序标签的小圆点，然后设置一个虚线边框和外边距，因为我们还需要在li标签中添加文本，所以也需要设置字体大小。同时我们还要设置隐藏。接着，选择ul标签中的li标签的span标签，设置字体大小为px和右外边距为10个像素。添加一个新的类，这个类是我们等下使用JavaScript动态添加元素时需要使用到的类。给这个类一个内边距为10个像素，在添加一些基本的样式就可以了。

		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width:600px;
			margin: 30px auto 0;
			border:1pxsolid #ccc;
		}
		.title{
			padding:10px;
			color: #F8BFBF;
		}
		ul>li{
			list-style: none;
			padding: 5px 10px;
			border: 1px dashed #ccc;
			font-size:18px;
			overflow: hidden;
		}
		ul li>span{
			font-size: 24px;
			font-style:italic;
			margin-right:10px;
		}
		.red{
			color: #E62326;
		}
		.content{
			padding-top: 10px;
		}
		.content div{
			width: 40%;
			height: 140px;
			float:left;
		}
		.content img{
			width: 100%;
			height: 100%;
		}
		.content p{
			width: 56%;
			font-size: 12px;
			padding: 4px 10px;
			float: left;
		}

设置完CSS样式后我们就需要使用JavaScript来动态添加HTML的标签了。

我们先声明一个变量用来添加对于各个电影的简介，使用number标序，movieName是电影名称，imgsrc添加图片，introduce添加文本。添加完对各个电影的简介后就开始写真正的JavaScript代码了。先给一个window．onload事件，在事件中声明一个方法，这个方法等下我们需要使用到。接着就是获取元素使用for循环将每个li标签绑定上鼠标移入事件，绑定一个鼠标移入时display从none改变为block。

在调用一个函数，使用到上面声明的方法，在使用for循环将span标签和div标签还有img标签绑定在ul标签中的li标签里。同时绑定一个p标签在li标签中。p标签是用来存放文本的，我们将上面的电影简介都绑定在p标签中。

window.onload=function(){
			creatLi();
			var lis=document.getElementById("list").getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				lis[i].onmouseover=function(){
					this.querySelector(".content").style.display="block";
				};
				lis[i].onmouseout=function(){
					this.querySelector(".content").style.display="none";
				}
			}
		}
		function creatLi(){
			var li=null;
			var list=document.getElementById("list");
			for(var i in movieList){
				li=document.createElement("li");
				li.innerHTML='<span class="red">'+movieList[i].number+'</span>'+movieList[i].movieName+'<div class="content"><div><img src="'+movieList[i].imgsrc+'"alt=""></div><p>简介：'+movieList[i].introduce+'</p></div>';list.appendChild(li);
			}
			li=null;
		}

这样手风琴的效果就制作完成了