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>

导致意外行为的行标有//错误。如果我将此行取消注释，则标题和导航容器都会展开，并且侧边栏会被删除。但如果我取消注释该行，则不会移除侧边栏。

我没有解释这种行为。

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...*/
}

隐藏补充工具栏 - marginRight /使用Javascript显示CSS错误

1 个答案: