javascript - 隐藏侧边栏 - marginRight / 使用 Javascript 显示 CSS 错误

Question

当窗口的大小调整到某个宽度以下时，我想删除侧边栏。然后在窗口展开时再次显示。

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 标记。如果我不注释此行，标题和导航容器都会展开并且侧边栏会被删除。但是，如果我取消注释该行，则不会删除侧边栏。

我对这种行为没有任何解释。

Answer 1

一种更简洁的方法是使用媒体查询。

@media (max-width: 451px) { /*when the screen is less than 451px wide*/
    #sidebar {
        display: none; /*hide the sidebar*/
    }
    /*more CSS to change margins, etc...*/
}