我在 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;
}
最佳答案
不需要做任何 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;
}
}
}
关于javascript - 坚持使用 jquery 函数来显示和隐藏 css 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19476314/