左側のメニューをデフォルトで非表示にする方法_html/css_WEB-ITnose

社内のプロジェクトでは、デフォルトでフレームの左側のメニューを非表示にする必要があり、いくつかの問題が発生しました。後で確認して参照できるように、問題解決プロセスを以下に簡単に記録します。

最初に

この問題は、対応する 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);

これを行うのは非常に簡単に感じられ、テストでは明らかな問題はありません。 Firefox では、ページ全体の上部のメニュー バーのみが正常に表示されます。ここからが少し難しくなり、ブラウザの互換性を解決するのは非常に困難です。

Final

CSS 表示属性は、値が「none」の場合、対応する要素がページに表示されないことのみを定義しており、標準のブラウザー実装はありません。

オンラインの検索結果には関連する問題の解決策がないため、自分で解決策を見つけるしかありません。

Firefox のみで問題が発生するため、ブラウザのメーカーを特定して特別な処理を行います。 コードは次のとおりです。

if($.browser.mozilla){    };

FirBug ビューアを使用すると、次のことがわかります。右ページのiframeのsrcはEmptyとなっており、左側のメニューは表示されていませんが、コンテンツは読み込まれています。問題の核心がわかれば、解決するのは簡単になります。デフォルトのメニューを見つけてメニュー リンクを取得し、右側のページの 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"));    
};     
});
});

しかし、問題はまだ解決されておらず、メニューの切り替えが遅れています。切り替えメニューをクリックしてもページは反応しません。つまり、メニューを切り替えるには 2 回クリックする必要があります。

この場合、デフォルトのメニュー 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"));        
});    
}; 
});

テスト後、バグはなく、問題は解決されました。