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

關閉按鈕問題

我的關閉按鈕不管expangZone收起還是展開都是顯示在頁面中的，這是為什么？

請叫我橙子蛋

2017-02-28

源自：形形色色的下拉菜單 7-3

關注問題我要回答

539

操作

收起

1 回答

請叫我橙子蛋提問者
2017-02-28

<!doctype?html>
<html>
<head>
<meta?charset="UTF-8">
<title>特效菜單</title>
<style>
*{
margin:?0;
padding:?0;
}
a{
text-decoration:?none;
color:?white;
}
#menuList{
position:?absolute;
top:10px;
margin:?0?auto;
}
.menunav?a{
margin-left:?60px;
color:?#666;
}
.expand{
height:?0px;
background-color:?#444;
position:?relative;
top:?30px;
width:?100%;
}
.expdiv{
width:?500%;
height:?130px;
}
.expdiv-list{
width:?20%;
text-align:?center;
float:?left;
line-height:?110px;
color:?white;
}
.expand?.close-btn{
width:?120px;
height:?20px;
background:?url(images/broswer_home.png)?no-repeat?-13px?-117px;
position:?absolute;
left:?50%;
bottom:?-2px;
margin-left:?-60px;
cursor:?pointer;
}
</style>
<script?src="js/jquery.js"></script>
<script>
$(function(){
$('.menunav').on("click",'a',function(){
if($(this).hasClass('btn-active')){
$("#closeBtn").click();
return?false;
}
var?index=$(this).index(),mgleft='-'+index*100+'%';

if($('#expandZone').hasClass('active')){
$('.expdiv').animate({marginLeft:mgleft});
}else{
$('.expdiv').css({marginLeft:mgleft});
$('#expandZone').animate({height:?"130px"}).addClass("active");
}
$(this).addClass('btn-active').siblings().removeClass('btn-active');
return?false;
})
$("#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="menuList">
<a?href="#">首頁</a>
<a?href="#">課程中心</a>
<a?href="#">學習中心</a>
<a?href="#">關于我們</a>
</div>
<div?id="expandZone">
<div>
<div>
<a?href="#">慕課網主頁</a>
</div>
<div>
<a?id="A4"?href="#">手機編程</a>
<a?href="#">前端開發</a>
<a?href="#">后臺開發</a>
</div>
<div>
<a?href="#">慕課網主頁</a>
</div>
<div>
<a?href="#">慕課網主頁</a>
</div>
</div>
<div?id="closeBtn">

</div>
</div>
</body>
</html>