中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

此導航下拉的每個下拉內(nèi)容都已經(jīng)通過CSS定位好了，但是，考慮到加載的原因，其下拉內(nèi)容默認是未裝載的。也就是說，是鼠標移至導航內(nèi)容上，才動態(tài)load下拉div并嵌入導航li標簽內(nèi)的，如下圖所示：

當然，作為靜態(tài)demo頁面，沒有必要動態(tài)load下拉內(nèi)容，所以，demo頁面的下拉div默認就是隱藏且裝載好的，于是，我們就可以通過簡單的class切換實現(xiàn)下拉效果。
首先是HTML結構，見下圖：

核心CSS代碼如下：

.i_n_l{display:none;}
.showtime_hover .i_n_l,.quiz_hover .i_n_l,.home_hover .i_n_l,
.movie_hover .i_n_l,.tv_hover .i_n_l,
.person_hover
.i_n_l,.blog_hover .i_n_l,.group_hover .i_n_l{display:block;}

可見，我們只要讓li標簽的class，例如“我的時光”所在li標簽，由”home”變成”home_hover”就可以控制下拉菜單的顯示與隱藏了，很簡單吧，所以，相應的js代表就會類似于下面：

<script>
    var o = document.getElementById("navigationRegion").getElementsByTagName("li");
    var l = o.length;
    for(var i=0; i<l; i+=1){
        o[i].onmouseover = function(i){
            var cl = o[i].className;
            if(/_on$/.test(cl) || /_hover$/.test(cl)){
                  return;
            }
            o[i].className = cl + "_hover";
        }(i);
        o[i].onmouseout = function(i){
            return function(){
                o[i].className = o[i].className.replace("_hover", "");
            }
        }(i);
    }
</script>

出處：zhangxinxu
責任編輯：bluehearts

上一頁 js下拉菜單實現(xiàn)與可訪問性的思考 [1] 下一頁 js下拉菜單實現(xiàn)與可訪問性的思考 [3]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。