公司一项目须要默许隐蔽框架的左边菜单，遇到了一些题目，下面扼要纪录题目的处置惩罚历程，以备后续检察、参考。

初

这个题目看似很简单，只须要找到对应的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了。

1. 设置菜单默许隐蔽 <div id="left" style="display: none">

2. 转变掌握元素的状况:’close’ to ‘open’ <div id="openClose" class="open">&nbsp;</div>

3. 转变右边内容内容页的默许宽度（原宽度=总宽度-左边-掌握元素） $("#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"));
        });
    }; 
});

经测试，没有bug，这个题目也就处置惩罚了。