关闭按钮问题
我的关闭按钮不管expangZone收起还是展开都是显示在页面中的，这是为什么？
1 回答
<!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>举报
0/150
提交
取消
