0

我正在使用我编写的一些 jQuery（我不太擅长 JavaScript/jQuery），它在浏览器调整大小时添加/删除 div（在本例中为 .show500、.hide500）。这是代码：

//Completely add/remove divs completely from DOM on browser resize

        $(function(){

            $(window).resize(function(){

                var win = $(this); //this = window

                if (win.width() <= 500) { 

                    $('.show500').add();

                    $('.hide500').remove();

                } else if (win.width() > 500) { 

                    $('.hide500').add();

                    $('.show500').remove();

                }

            });

        });

所以如果浏览器窗口小于或等于 500，则将 .show500 添加到 DOM 中，并从 DOM 中删除 .hide500。

然后，如果浏览器宽度大于 500，则将 .hide500 添加到 DOM 中，并从 DOM 中删除 .show500。

但是，当我使用此代码时，默认情况下会显示 .hide500 div，然后当我缩小浏览器大小时，会隐藏 .hide500 div 而不会显示 .show500 。然后当我展开浏览器时，两个 div 都消失了。

这是代码的jsFiddle：http: //jsfiddle.net/XzrPR/

我将不胜感激你们的任何帮助！

4

4 回答 4

1

您else if可以简化为 just else，我认为您的意思是使用.show()代替.add()和.hide()代替.remove()：

if (win.width() <= 500) { 
    $('.show500').show();
    $('.hide500').hide();
} else {
    $('.hide500').show();
    $('.show500').hide();
}

但是，您也可以使用纯 CSS 使用媒体查询来做到这一点：

.show500 {
    display: none;
}
.hide500 {
    display: block;
}
@media all and (max-width: 500px) {
  .show500 {
     display: block;
  }
  .hide500 {
    display: none;
  }
}

http://css-tricks.com/css-media-queries/

于 2013-04-19T19:35:15.310 回答
0
于 2013-04-19T19:35:05.990 回答
0

一个非常简单的媒体查询示例，用于隐藏/显示，而不是添加/删除：

@media (mix-width:501px) and (max-width:9999px) {
    .show500    { display:none; }
    .hide500    { display:block; }
} 

@media (max-width:500px){
    .show500    { display:block; }
    .hide500    { display:none; }
}
于 2013-04-19T19:35:59.673 回答
0

.remove()从 DOM 中移除元素，你无法取回它们

试试这个方法

 if (win.width() <= 500) { 
    $('.show500').show();
    $('.hide500').hide();
 } else if (win.width() > 500) { 
    $('.hide500').show();
    $('.show500').hide();
 }

工作小提琴

于 2013-04-19T19:38:21.863 回答