javascript - 隐藏侧边栏 - marginRight/display CSS bug with Javascript

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 queries .

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