这代码里面出了什么问题呢？完全显示不出上课时的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.navlist
{
position:absolute;
top:10px;
}
a
{
text-decoration:none;
color:#fff;
}
.navlist a
{
margin-left:60px;
color:#666;
}
.expand
{
height:0px;
background-color: #333d4d;
overflow:hidden;
position:relative;
top:30px;
width:100%;
}
.expdiv
{
height:130px;
width:500%;
}
.expdiv-list
{
width:20%;
text-align:center;
float:left;
line-height:110px;
color:#fff;
}
.expand .close-btn
{
width:120px;
height:20px;
background:url(http://img1.sycdn.imooc.com//5461ba3b0001ee3603840154.jpg) no-repeat -13px -117px;
position: absolute;
left:50%;
bottom:-2px;
margin-left:-60px;
cursor:pointer;
}
</style>
<script>
$(function(){
$("#menuList").on("click","a", function(){
if ($(this).hasClass("btn-active")){
$("#expandZone #closeBtn").click();
return false;
}
var curIndex = $(this).index(),mlValue = "-" + curIndex * 100 + "%";
if ($("#expandZone").hasClass("active")){
$("#expandZone.expdiv").animate({marginLeft:mlValue});
}
else
{
$("#expandZone.expdiv").css({marginLeft:mlValue});
$("#expandZone").animate({height:"130px"}).addClass("active");
}
$(this).addClass("btn-active").siblings().removeClass("btn-active");
return false;
});
$("#expandZone #closeBtn").on("click",function(){
$("#expandZone").animate({height:"0px"},function(){
$(this).removeClass("active");
$("#menuList.btn-active").removeClass("btn-active");
});
return false;
});
});
</script>
</head>
<body>
<div id="menulList">
<a href="#">首页</a><a href="#">课程大厅</a><a href="#">学习中心</a><a href="#">个人中心</a><a href="#">关于我们</a>
</div>
<div id="expandZone">
<div>
<div>
<a href="#">慕课网主页</a>
</div>
<div>
<a href="#" id="A4">前端课程</a><a href="#">手机开发</a><a href="#">后台开发</a>
</div>
<div>
<a href="#" id="A4">前端课程</a><a href="#">手机开发</a><a href="#">后台开发</a>
</div>
<div>
个人信息：
</div>
<div>
公司地址：北京市西城区德外大街10号。
</div>
</div>
<div id="closeBtn">
</div>
</div>
</body>
</html>
