                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

練習(xí)題看它答案為什么還是有bug，就是我點擊首頁，再點擊首頁二級框就會消失為什么？？？

<!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>
??? <title></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://img1.sycdn.imooc.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="#">學(xué)習(xí)中心</a> <a href="#">個人中心</a>
??????? <a href="#">關(guān)于我們</a>
??? </div>
??? <div id="expandZone" class="expand">
??????? <div class="expdiv">
??????????? <div class="expdiv-list">
??????????????? <a href="#">慕課網(wǎng)主頁</a>
??????????? </div>
??????????? <div class="expdiv-list">
??????????????? <a href="#" id="A4">前端課程</a> <a href="#">手機開發(fā)</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">
??????????????? 公司地址：北京市西城區(qū)德外大街10號
??????????? </div>
??????? </div>
??????? <div id="closeBtn" class="close-btn">
??????? </div>
??? </div>
</body>
</html>