這代碼里面出了什么問題呢？完全顯示不出上課時的效果。
<!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>
2015-01-15
你沒引用JQ庫。。。寫JQ要記得引用啊