html中如何實(shí)現(xiàn)默認(rèn)隱藏左側(cè)菜單

這篇“html中如何實(shí)現(xiàn)默認(rèn)隱藏左側(cè)菜單”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“html中如何實(shí)現(xiàn)默認(rèn)隱藏左側(cè)菜單”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

html中實(shí)現(xiàn)默認(rèn)隱藏左側(cè)菜單的示例

初

這個(gè)問題看似很簡(jiǎn)單，只需要找到對(duì)應(yīng)的js和css，設(shè)置左側(cè)菜單不顯示或者默認(rèn)點(diǎn)擊一次即可。沿著上面的思路，我改出了第一版：

    $(document).ready(function() {        
    $("#menu a.menu").click(function(){            
    $("#menu li.menu").removeClass("active");            
    $(this).parent().addClass("active");            
    if($("#openClose").hasClass("close")){                
    $("#openClose").click();            
    }        
    });        
    if($("#openClose").hasClass("close")){            
    $("#openClose").click();        
    }    
    });

經(jīng)測(cè)試，修改未通過。在登陸成功，跳轉(zhuǎn)到這個(gè)頁(yè)面時(shí)會(huì)明顯看出左側(cè)菜單的漸默。

次

從上次修改中可以看出，左側(cè)菜單是默認(rèn)顯示的。由于js實(shí)現(xiàn)的效果不符合需求，只能改css了。

$("#right").width($("#content").width()-$("#openClose").width()-5);

做到這里感覺還是蠻輕松的，測(cè)試也沒有明顯的問題。事情總有反復(fù)，bug也是出人意料，在Firfox下整個(gè)頁(yè)面只有頂部菜單欄可以正常顯示。問題在這兒變得有點(diǎn)麻煩了，瀏覽器兼容性很難解決。

終

CSS display 屬性只定義了值為'none'時(shí)，對(duì)應(yīng)元素不在頁(yè)面顯示，并沒有規(guī)范瀏覽器的實(shí)現(xiàn)。

網(wǎng)上的搜索結(jié)果也沒有相關(guān)問題的解決方案，只能自己想辦法了。

既然只在Firfox下有問題，則判斷瀏覽器廠商，做特殊處理，代碼如下：

if($.browser.mozilla){    };

利用FirBug的查看器可知，右側(cè)頁(yè)面iframe的src為空，且左側(cè)菜單雖未顯示，但內(nèi)容已加載完成。知道問題癥結(jié)所在，就好解決了。找出默認(rèn)菜單，取得菜單鏈接，為右側(cè)頁(yè)面iframe的src賦值。

$(document).ready(function() {    
if($.browser.mozilla){        
$("#mainFrame").attr("src",$("#menuFrame").contents().find("li.active :first-child").attr("href"));    
};     
$("#menu a.menu").click(function(){        
$("#menu li.menu").removeClass("active");        
$(this).parent().addClass("active");        
if($("#openClose").hasClass("close")){            
$("#openClose").click();        
}        
if($.browser.mozilla){        
$("#mainFrame").attr("src",$("#menuFrame").contents().find("li.active :first-child").attr("href"));    
};     
});
});

但問題還是沒有解決，切換菜單滯后。在點(diǎn)擊切換菜單后頁(yè)面沒有反應(yīng)，在第二次點(diǎn)擊切換菜單時(shí)才會(huì)跳轉(zhuǎn)得到第一次要跳轉(zhuǎn)的菜單，或者說是切換菜單需要單擊兩次。

這種情況應(yīng)該是獲取默認(rèn)菜單url的時(shí)機(jī)不對(duì)，應(yīng)該在左側(cè)菜單切換完成后獲取。在菜單綁定的單擊方法中，左側(cè)菜單的內(nèi)容并沒有完成刷新。

查資料可知，iframe有一個(gè)加載完成事件，正好可以用在這里。最終代碼如下：

$(document).ready(function() {  
$("#menu a.menu").click(function(){        
$("#menu li.menu").removeClass("active");        
$(this).parent().addClass("active");        
if($("#openClose").hasClass("close")){            
$("#openClose").click();        
}    
});        
if($.browser.mozilla){        
$("#menuFrame").on("load",function(){            
$("#mainFrame").attr("src",$("#menuFrame").contents().find("li.active :first-child").attr("href"));        
});    
}; 
});

以上是“html中如何實(shí)現(xiàn)默認(rèn)隱藏左側(cè)菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！