html中如何实现默认隐藏左侧菜单

这篇“html中如何实现默认隐藏左侧菜单”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“html中如何实现默认隐藏左侧菜单”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

html中实现默认隐藏左侧菜单的示例

初

这个问题看似很简单，只需要找到对应的js和css，设置左侧菜单不显示或者默认点击一次即可。沿着上面的思路，我改出了第一版：

    $(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();        
    }    
    });

经测试，修改未通过。在登陆成功，跳转到这个页面时会明显看出左侧菜单的渐默。

次

从上次修改中可以看出，左侧菜单是默认显示的。由于js实现的效果不符合需求，只能改css了。

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

做到这里感觉还是蛮轻松的，测试也没有明显的问题。事情总有反复，bug也是出人意料，在Firfox下整个页面只有顶部菜单栏可以正常显示。问题在这儿变得有点麻烦了，浏览器兼容性很难解决。

终

CSS display 属性只定义了值为'none'时，对应元素不在页面显示，并没有规范浏览器的实现。

网上的搜索结果也没有相关问题的解决方案，只能自己想办法了。

既然只在Firfox下有问题，则判断浏览器厂商，做特殊处理，代码如下：

if($.browser.mozilla){    };

利用FirBug的查看器可知，右侧页面iframe的src为空，且左侧菜单虽未显示，但内容已加载完成。知道问题症结所在，就好解决了。找出默认菜单，取得菜单链接，为右侧页面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"));    
};     
});
});

但问题还是没有解决，切换菜单滞后。在点击切换菜单后页面没有反应，在第二次点击切换菜单时才会跳转得到第一次要跳转的菜单，或者说是切换菜单需要单击两次。

这种情况应该是获取默认菜单url的时机不对，应该在左侧菜单切换完成后获取。在菜单绑定的单击方法中，左侧菜单的内容并没有完成刷新。

查资料可知，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中如何实现默认隐藏左侧菜单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！