1

ウィンドウのサイズが特定の幅より小さくなったときにサイドバーを削除したい。そして、ウィンドウが展開されたときにそれを再び表示します。

HTML：

<style type="text/css">
    #sidebar{
       width:290px;
       float:right;
       /*...*/
    }
    #header{
       margin-right:290px;
       /*...*/
    }
    #navigation{
       margin-right:290px;
       /*...*/
    }
    #page{
       margin-right:290px;
       /*...*/
    }
</style>
<div id="wrapper">
    <div id="sidebar">
        ...
    </div>
    <div id="header">
        ...
    </div>
    <div id="navigation">
        ...
    </div>
    <div id="page">
        ...
    </div>
</div>

Javascript：

<script type="text/javascript"><!--
function sbar_check(){

    var page = $("#page");
    var header = $("#header");
    var navigation = $("#navigation");
    var sidebar = document.getElementById("sidebar");

    //get width of page
    var pagew = page.width();

    if(pagew < 451) {

        //hide
        sidebar.style.display = 'none';

        header.css('marginRight',   '0');
        navigation.css('marginRight',   '0');
        /*
        //error
        page.css('marginRight',     '0');
        */

    } else {

        //show
/*
            header.css('marginRight',   '290');
            navigation.css('marginRight',   '290');
            page.css('marginRight',     '290');
*/

            sidebar.style.display = 'block';
    }

}

//initial sidebar check
$().ready(function(){
    sbar_check();
});
//sidebar check on resize
window.onresize = function(event){
    sbar_check();
};
//--></script>

予期しない動作を引き起こす行は//errorでマークされています。この行をコメント化しないままにすると、ヘッダーとナビゲーションコンテナーの両方が展開され、サイドバーが削除されます。しかし、行のコメントを外しても、サイドバーは削除されません。

この振る舞いについての説明はありません。

4

1 に答える 1

5

これを行うためのはるかにクリーンな方法は、メディアクエリを使用することです。

@media (max-width: 451px) { /*when the screen is less than 451px wide*/
    #sidebar {
        display: none; /*hide the sidebar*/
    }
    /*more CSS to change margins, etc...*/
}
于 2012-10-09T13:46:54.883 に答える