中文字幕在线中字日韩 ,AⅤ午夜影院免费,www国产

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

為什么我跟老師照著敲得，第一是背景圖沒有占100%；第二點擊收起沒有效果，哪位大神有時間給解釋一下唄?。。?/h1>

求解？？

<!doctype html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>特效菜單</title>
?? ?<style>
?? ??? ?.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.2.min.js"></script>
?? ?<script>
?? ??? ??? ?$(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:mlValue});

?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?$("#expandZone .expdiv").css({margineLft:mlValue});
?? ??? ??? ??? ??? ?$("#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).relativeClass("active");
?? ??? ??? ??? ??? ??? ??? ?$("menuList .btn-active").removeClass("btn-active");
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?});
?? ??? ??? ?})
?? ?</script>
</head>
<body>
?? ?<div id="menuList">
?? ??? ?<a href="#">首頁</a>
?? ??? ?<a href="#">課程大廳</a>
?? ??? ?<a href="#">學(xué)習(xí)中心</a>
?? ??? ?<a href="#">關(guān)于我們</a>
?? ??? ?<a href="#">個人中心</a>
?? ??? ?<div id="expandZone">
?? ??? ??? ?<div>
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?<a href="#">慕課網(wǎng)主頁</a>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?<a href="#">前端課程</a>
?? ??? ??? ??? ??? ?<a href="#">手機開發(fā)</a>
?? ??? ??? ??? ??? ?<a href="#">后臺編程</a>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?<a href="#">javascript</a>
?? ??? ??? ??? ??? ?<a href="#">css</a>
?? ??? ??? ??? ??? ?<a href="#">jQuery</a>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?個人信息
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ?公司地址：111111111
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ??? ?<div id="closeBtn">
?? ??? ??? ?</div>
?? ??? ?</div>?? ??? ?
?? ?</div>
</body>
</html>

_軒轅_

2017-02-15

源自：形形色色的下拉菜單 7-3

關(guān)注問題我要回答

618

操作

收起

3 回答

余民
2018-08-10

你那個關(guān)閉按鈕給的是?id="closeBtn",然后style里的是??.expand .close-btn,看看你的style里的內(nèi)容，仔細改一下，

?.expdiv-list{
?? ??? ??? ?width:20%;
?? ??? ??? ?text-align: center;
?? ??? ??? ?float: left;
?? ??? ??? ?line-height: 110px;
?? ??? ??? ?color: white;
?? ??? ?}

你的body里沒有定義.expdiv-list，也要定義一下。

綜上所訴，你的style和你的body里的id或class不對應(yīng)，你在看看