1

我在 jquery 中创建了一个函数，它在窗口调整大小时显示隐藏的 css 元素，现在我被困住了，如果窗口重新调整为默认大小，然后隐藏元素......我不知道该怎么做......

var cwidth = $(window).width();
$(window).on('resize', function(event){
    profdisplayer();
});

function profdisplayer()
{
    var i=1390;
    var j=1;
    for(; j<=5;j++){          
        if (cwidth>i){    
            $("#d"+j).show();
            i=i+600;
        }
    }
}

html

<body>
<div id="container">
<div id="containerchild">
<div id="hidden"></div>
        <div id="myfavcontainer">
            <div id="myfav"></div>
        </div>
        <div id="profilecontainer">
                <div id="abouttab"></div>
                <div id="horirule620"></div>
                <div id="profiledata"></div>
        </div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
        <div id="d4"></div>
        <div id="d5"></div>
  </div>
  </div>

css

#container{
height:100%;
width:100%;
background-color:#000;

}
#containerchild{
height:100%;
width:100%;
float:right;
margin:0 0 0 0;
position:relative;
}
#hidden{
height:100%;
width:174px;
float:right;
}
#myfavcontainer{
height:100%;
width:575px;
float:left;
position:absolute;
margin:0 0 0 0;
background-color:#31353E;
}
#profilecontainer{
height:100%;
width:600px;
float:left;
position:absolute;
margin: 0 0 0 575px;
background-color:#31353E;
box-shadow:inset 7px 0 7px -7px #000;
-webkit-box-shadow:inset 7px 0 7px -7px #000;
-moz-box-shadow:inset 7px 0 7px -7px #000;
-ms-box-shadow:inset 7px 0 7px -7px #000;
-o-box-shadow:inset 7px 0 7px -7px #000;
}
#horirule620{
height:1px;
width:600px;
float:left;
background-color:#1C1D22;
}
#myfav{
height:620px;
width:575px;
background-color:#fff;
position:relative;
margin:0 0 0 0;
}
#abouttab{
height:60px;
width:600px;
float:left;
position:relative;
margin:0 0 0 0;
background-color:#31353E;
box-shadow:inset 7px 0 7px -7px #000;
-webkit-box-shadow:inset 7px 0 7px -7px #000;
-moz-box-shadow:inset 7px 0 7px -7px #000;
-ms-box-shadow:inset 7px 0 7px -7px #000;
-o-box-shadow:inset 7px 0 7px -7px #000;
}
#profiledata{
height:559px;
width:600px;
float:left;
margin:1px 0 0 0;
background-color:#31353E;
box-shadow:inset 7px 0 7px -7px #000;
-webkit-box-shadow:inset 7px 0 7px -7px #000;
-moz-box-shadow:inset 7px 0 7px -7px #000;
-ms-box-shadow:inset 7px 0 7px -7px #000;
-o-box-shadow:inset 7px 0 7px -7px #000;
}
#d1{
height:100%;
width:600px;
float:left;
position:relative;
margin: 0 0 0 1175px;
background-color:#31353E;
box-shadow:inset 7px 0 7px -7px #000;
-webkit-box-shadow:inset 7px 0 7px -7px #000;
-moz-box-shadow:inset 7px 0 7px -7px #000;
-ms-box-shadow:inset 7px 0 7px -7px #000;
-o-box-shadow:inset 7px 0 7px -7px #000;
display:none;
}
#d2, #d3, #d4, #d5 {
height:100%;
width:600px;
float:left;
position:relative;
margin: 0 0 0 0;
background-color:#31353E;
box-shadow:inset 7px 0 7px -7px #000;
-webkit-box-shadow:inset 7px 0 7px -7px #000;
-moz-box-shadow:inset 7px 0 7px -7px #000;
-ms-box-shadow:inset 7px 0 7px -7px #000;
-o-box-shadow:inset 7px 0 7px -7px #000;
display:none;
}
4

3 回答 3

1

没有必要做任何 CSS 媒体查询的事情.. 我用 jquery 做的

$(window).on('resize', function(event){
    var awidth = $(window).width();
    if (awidth>bwidth)
        {   profdisplayer();
            bwidth = awidth;
        }
    if (bwidth>awidth)
    {
        profhider();
        var getdivname = $('#dcontainer').find("div").first();
        var divid = getdivname.attr("id");
        var divno = divid.match(/[0-9]+/);
        $('#d'+divno).show();
        bwidth=awidth;
        }
    });

如果宽度增加，profdisplayer 将在调整大小时显示

   function profdisplayer()
{
    var cwidth = $(window).width();
    var i=1390;
    for(var j=1; j<=8;j++){
    if (cwidth>i){   
        $("#d"+j).show();
        i=i+600;
        }
        else
        {
            break;
        }
    }
}

如果宽度减小，profhider 将在调整大小时隐藏

   function profhider()
{
    var dwidth = $(window).width();
    var z = 5375;
        for(var k=8; k>=1;k--) {
            if(dwidth<z)
            {
            $("#d"+k).hide();
            z=z-600;
            $('#dcontainer').first().show();
            }
            else
            {
                break;
            }
        }

    }
于 2013-10-23T15:10:43.907 回答
0

您可以仅使用 css 和媒体查询来执行此操作。

HTML：

<body>
<div id="container">
<div id="containerchild">
<div id="hidden"></div>
        <div id="myfavcontainer">
            <div id="myfav"></div>
        </div>
        <div id="profilecontainer">
                <div id="abouttab"></div>
                <div id="horirule620"></div>
                <div id="profiledata"></div>
        </div>
        <div id="d1" class="hide"></div>
        <div id="d2" class="hide"></div>
        <div id="d3" class="hide"></div>
        <div id="d4" class="hide"></div>
        <div id="d5" class="hide"></div>
  </div>
  </div>

CSS

@media screen and (min-width: 800px) {
   .hide { display: none }
}
于 2013-10-20T14:13:20.503 回答
0

媒体查询旨在完全满足您的需求。据我了解，它看起来像你想每 600 像素显示一次“d#”div，如果窗口大于 1390 像素，则显示第一个。

所以要做到这一点，我们需要一些媒体查询，第一个将显示 d1 框

@media (min-width:1390px){
    #d1{
        display: block;
    }
}

这将检查并确保窗口宽度最小为 1390，如果是，则将执行包含在其中的 css。

所以对于所有它应该看起来像：

#d1,#d2,#d3,#d4,#d5{
    display: none;
}
@media (min-width:1390px){
    #d1{
        display: block;
    }
}
@media (min-width:1990px){
    #d2{
        display: block;
    }
}
@media (min-width:2590px){
    #d3{
        display: block;
    }
}
@media (min-width:3190px){
    #d4{
        display: block;
    }
}
@media (min-width:3790px){
    #d5{
        display: block;
    }
}

这将在页面变大时显示所有这些，然后在收缩时重新隐藏它们。

于 2013-10-21T16:16:03.120 回答