Question

我正在开发一个响应式网站，当屏幕达到一定大小时，我想在元素之前添加一些分隔线来移动内容。我已经完成了这一点。

jQuery(window).resize(function () {
    var WINDOW = jQuery(window).width();

    console.log(WINDOW)

    if (WINDOW < 1025) {
        jQuery('<br /><br />').insertBefore('#FILTER_ADVANCED');
    }

});

当窗口回到1025以上时，有没有办法删除这些断裂线？我想我正在寻找与insertBefore（）相反的方法。

我希望能够调整浏览器的大小并观察所有内容，我知道这一点毫无意义，但事实上我无法做到这一点让我感到烦恼。

感谢。

我可以在媒体查询中封装jQuery吗？

Answer 1

直言不讳的解决方案像这样：

$(window).resize(function () {
    var WINDOW = $(window).width();

    console.log(WINDOW)

    if (WINDOW < 1025) {
        jQuery('<br /><br />').insertBefore('#FILTER_ADVANCED');
    } else {
        jQuery("#FILTER_ADVANCED").prev("br").remove();
        jQuery("#FILTER_ADVANCED").prev("br").remove();
    }

});

Answer 2

你知道'reponsive'设计并不意味着它会响应用户改变屏幕大小，而是在不同大小的屏幕上显示（即移动与桌面）。

你可以使用CSS做同样的事情，有一个像这样的css规则（我想。我没有做太多的CSS）：

// big screen - no padding
@media (min-width:1024px) 
{ 
  #FILTER_ADVANCED padding-top: 0px
}

// small screen - some padding
@media (max-width:1024px) 
{ 
  #FILTER_ADVANCED padding-top: 10px
}

如何删除我使用insertBefore（）添加的'<br/>'元素？

2 个答案: