为了账号安全,请及时绑定邮箱和手机立即绑定

这个为什么点一级菜单没反应,二级菜单不显示出来啊

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

.navlist{

position:absolute;

top:10px;

}

a{

text-decoration:none;

color:white;

}

.navlist a{

margin-left:270px;

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:white;

}

.expand .close-btn{

width:120px;

height:20px;

background:url(file://D:/broswer_home.png) no-repeat -13px -117px;

position:absolute;

left:50%;

bottom:-2px;

margin-left:-60px;

cursor:pointer;

}

</style>

<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.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:m1Value});

}

else{

$("#expandZone .expdiv").css({marginLeft:m1Value});

$("#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="menuList" class="navlist">

<a href="#">首页</a>

<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>

</div>

<div class="expdiv-list">

<a href="#">Javascript</a>

<a href="#">CSS</a>

<a href="#">JQuery</a>

</div>

<div class="expdiv-list">

个人信息:胡图图

</div>

<div class="expdiv-list">

公司地址:翻斗大街翻斗花园二号楼1001室

</div>

</div>

<div id="closeBtn" class="close-btn"></div>

</div>

</body>

</html>


正在回答

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106970    人
  • 解答问题       543    个

本教程从易到难,循循渐进,运用不同技术实现动态下拉菜单

进入课程

这个为什么点一级菜单没反应,二级菜单不显示出来啊

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信