                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

渣渣求指導：那步錯了，效果沒有實現 >哇_哇<

<!DOCTYPE?html>
<html>
<head>
?<meta?charset="UTF-8">
?<title>Document</title>
<style?type="text/css">
.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(圖片1.png)?0?0?no-repeat;position:absolute;left:50%;bottom:-2px;margin-left:-60px;cursor:pointer;}</style>
<script?src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script?type="text/javascript">
//?$(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;
//??});
//?});//?$(function(){
//??if($(this).hasClass('btn-active')){$('#expandZone?#closeBtn').cilck();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');$('#navList?.btn-active').removeClass('btn-active');});return?false;});s
//?});//不知道那里出錯了瑪德??$(function?()?{
????????//navlist
????????$('#navList').on('click',?'.nav-btn',?function?(event)?{
????????????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');
????????????????$('#navList?.btn-active').removeClass('btn-active');
????????????});
????????????return?false;
????????});
????});</script></head>
<body>
<div?id="menuList"?class="navlist">?<a?href="#">首頁</a><a?href="#">課程大廳</a><a?href="#">學習中心</a><a?href="#">關于我們</a></div>?
???<div?id="expandZone"?class="expand">
???????<div?class="expdiv">
????????????<div?class="expdiv-list"><a?href="#">慕課網主頁</a></div>
????????????<div?class="expdiv-list"><a?href="#"?id="a4">前端課程</a><a?href="#">手機開發</a><a?href="#">課程開發</a></div>
????????????<div?class="expdiv-list"><a?href="#">js</a><a?href="#">css</a><a?href="#">jquery</a></div>
????????????<div?class="expdiv-list">個人信息：</div>
????????????<div?class="expdiv-list">公司地址：北京市西城區德外大街10號</div>
???????</div>
???????<div?id="closeBtn"?class="close-btn"></div>
???</div>
</body>
</html>