Javascript 坚持使用jquery函数来显示和隐藏css元素_Javascript_Jquery_Html_Css

Javascript 坚持使用jquery函数来显示和隐藏css元素

javascript jquery html css

Javascript 坚持使用jquery函数来显示和隐藏css元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在jquery中创建了一个函数，它在调整窗口大小时显示隐藏的css元素，现在我被卡住了，如果窗口重新调整为默认值，那么隐藏元素…我不知道如何做 var cwidth = $(window).width(); $(window).on('resize', function(event){ profdisplayer(); }); function profdisplayer() { var i=1390; var j=1; for(; j<=5;j++){

我在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;
        }
    }
}

您可以只使用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和媒体查询来实现这一点

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>

媒体查询的设计目的正是为了满足您的需求。据我所知，如果窗口大于1390px，则每600像素显示一次“d#”div，并显示第一个div

为此，我们需要一些媒体查询，第一个查询将显示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;
    }
}

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

媒体查询的设计目的正是为了满足您的需求。据我所知，如果窗口大于1390px，则每600像素显示一次“d#”div，并显示第一个div

为此，我们需要一些媒体查询，第一个查询将显示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;
    }
}

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

无需执行任何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;
        }
    }
}

函数profdisplayer（）
{
var cwidth=$（window.width（）；
VarI=1390；
对于（var j=1；ji）{
$（#d+j）.show（）；
i=i+600；
}
其他的
{
打破
}
}
}

如果宽度减小，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;
            }
        }

    }

函数profider（）
{
var dwidth=$（window.width（）；
var z=5375；
对于（变量k=8；k>=1；k--）{
如果（dwidth，则无需执行任何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;
        }
    }
}

函数profdisplayer（）
{
var cwidth=$（window.width（）；
VarI=1390；
对于（var j=1；ji）{
$（#d+j）.show（）；
i=i+600；
}
其他的
{
打破
}
}
}

如果宽度减小，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;
            }
        }

    }

函数profider（）
{
var dwidth=$（window.width（）；
var z=5375；
对于（变量k=8；k>=1；k--）{
如果（dwidth你能显示你的HTML代码吗？你也能显示HTML吗？@BeNdErR我已经添加了page@Sarcastic，我添加了页面的html和css为什么使用jquery而不是css媒体查询？你能显示你的html代码吗？你也能显示html吗？@BeNdErR我添加了页面的html和csspage@Sarcastic，我有一个广告编辑页面的html和css为什么使用jquery而不是css媒体查询？好吧，如果我这样做的话，我将无法滑动div…无论如何…thanx的帮助…也许它可以用于任何其他用途…thanx很多…好吧，如果我这样做，我将无法滑动div（s）…无论如何…谢谢你的帮助…也许它对任何其他用途都有用…谢谢。。。