这次我们要制作的是一个垂直的下拉框，这种下拉框一帮在电影院比较常见。
这就是我们今天要制作出来的效果。今天要用到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;}
这样手风琴的效果就制作完成了
