<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <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(images/broswer_home.png) no-repeat -13px -117px; position: absolute; left: 50%; bottom: -2px; margin-left: -60px; cursor: pointer; } </style> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#menuList").on("click","a",function(){ if($(this).hasClass("btn-active")){ $("#expandZone #close-Btn").click(); return false; } var curIndex=$(this).index(); var mlValue="-"+curIndex*100+"%"; if($("#expandZone").hasClass("active")){ $(".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 #close-Btn").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="#">关于我们1</a> </div> <div class="expdiv-list"> <a href="#">反反复复2</a> </div> <div class="expdiv-list"> <a href="#">vvv1</a><a href="#">关vv2</a><a href="#">关vvvss</a> </div> <div class="expdiv-list"> <a href="#">关删除们1</a><a href="#">关vv</a><a href="#">防水层们</a> </div> <div id="close-Btn" class="close-btn"> </div> </div> <div></div> </div></body></html>这条代码有什么作用??我感觉可以不要这条程序的
添加回答
举报
0/150
提交
取消