<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery实现导航滑动</title> <style type="text/css"> .navlist { position: absolute; top: 10px; } a { text-decoration: none; color: White; } .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: White; } .expand .close-btn { width: 120px; height: 20px; background: url(http://img.mukewang.com/5461ba3b0001ee3603840154.jpg) no-repeat -13px -117px; position: absolute; left: 50%; bottom: -2px; margin-left: -60px; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#menuList").on("click", "a", function () { // 模拟点击closeBtn按钮 if($(this).hasClass("btn-active")){ $("#expandZone #closeBtn").click(); return false; } var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%"; if ($("#expandZone").hasClass("active")) { // 给expdiv类元素赋予动画切换的效果 $("#expandZone .expdiv").animate({ marginLeft: mlValue }); } else { $("#expandZone .expdiv").css({ marginLeft: mlValue }); $("#expandZone").animate({ height: "130px" }).addClass("active"); } // 为当前元素添加"btn-active"样式，同时移除同级其它元素的"btn-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> <a href="#">手机开发</a> <a href="#">后台编程</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"> 公司地址：山东省淄博市 </div> </div> <div id="closeBtn" class="close-btn"> </div> </div> </body> </html>