這篇“html中如何實現(xiàn)默認隱藏左側(cè)菜單”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“html中如何實現(xiàn)默認隱藏左側(cè)菜單”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
html中實現(xiàn)默認隱藏左側(cè)菜單的示例
這個問題看似很簡單，只需要找到對應(yīng)的js和css，設(shè)置左側(cè)菜單不顯示或者默認點擊一次即可。沿著上面的思路，我改出了第一版：
重慶分公司
重慶分公司
$(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)測試，修改未通過。在登陸成功，跳轉(zhuǎn)到這個頁面時會明顯看出左側(cè)菜單的漸默。
從上次修改中可以看出，左側(cè)菜單是默認顯示的。由于js實現(xiàn)的效果不符合需求，只能改css了。
$("#right").width($("#content").width()-$("#openClose").width()-5);做到這里感覺還是蠻輕松的，測試也沒有明顯的問題。事情總有反復(fù)，bug也是出人意料，在Firfox下整個頁面只有頂部菜單欄可以正常顯示。問題在這兒變得有點麻煩了，瀏覽器兼容性很難解決。
CSS display 屬性只定義了值為'none'時，對應(yīng)元素不在頁面顯示，并沒有規(guī)范瀏覽器的實現(xiàn)。
網(wǎng)上的搜索結(jié)果也沒有相關(guān)問題的解決方案，只能自己想辦法了。
既然只在Firfox下有問題，則判斷瀏覽器廠商，做特殊處理，代碼如下：
if($.browser.mozilla){ };利用FirBug的查看器可知，右側(cè)頁面iframe的src為空，且左側(cè)菜單雖未顯示，但內(nèi)容已加載完成。知道問題癥結(jié)所在，就好解決了。找出默認菜單，取得菜單鏈接，為右側(cè)頁面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"));
};
});
});但問題還是沒有解決，切換菜單滯后。在點擊切換菜單后頁面沒有反應(yīng)，在第二次點擊切換菜單時才會跳轉(zhuǎn)得到第一次要跳轉(zhuǎn)的菜單，或者說是切換菜單需要單擊兩次。
這種情況應(yīng)該是獲取默認菜單url的時機不對，應(yīng)該在左側(cè)菜單切換完成后獲取。在菜單綁定的單擊方法中，左側(cè)菜單的內(nèi)容并沒有完成刷新。
查資料可知，iframe有一個加載完成事件，正好可以用在這里。最終代碼如下：
$(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中如何實現(xiàn)默認隱藏左側(cè)菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
