改變控制元素的狀態(tài):"close" to "open"

改變右側(cè)內(nèi)容內(nèi)容頁的默認(rèn)寬度（原寬度=總寬度-左側(cè)-控制元素） $("#right").width($("#content").width()-$("#openClose").width()-5);

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

CSS display 屬性只定義了值為"none"時(shí)，對(duì)應(yīng)元素不在頁面顯示，并沒有規(guī)范瀏覽器的實(shí)現(xiàn)。
網(wǎng)上的搜索結(jié)果也沒有相關(guān)問題的解決方案，只能自己想辦法了。

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

if($.browser.mozilla){
    
}; 

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

但問題還是沒有解決，切換菜單滯后。在點(diǎn)擊切換菜單后頁面沒有反應(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"));
        });
    }; 
});

經(jīng)測(cè)試，沒有bug，這個(gè)問題也就解決了。