在媒体查询 jquery 从侧边栏中删除 div答案

【问题标题】：On Media query jquery remove div from sidebar在媒体查询 jquery 从侧边栏中删除 div
【发布时间】：2013-01-23 09:43:15
【问题描述】：

当最大宽度为 959px 时，我正在使用 jquery 从原始位置删除两个 div .twitter 和 .email，并将这两个 div 放在 div #maininner。

当最大宽度大于959px时，我希望这两个div回到原来的位置：都在自己的div类中.grid-box.width100.grid-v在 #sidebar-a 内。

问题是#sidebar-a里面有多个.grid-box.width100.grid-v。如何让两个 div .twitter 和 .email 进入它们被删除的两个空 .grid-box.width100.grid-v？

注意：我无法在多个 div 类 .grid-box.width100.grid-v 上放置单独的类。

$.onMediaQuery('(max-width: 959px)', {
        valid: function() {
        $("#sidebar-a ").remove().insertBefore($("#maininner"));    
        $(".twitter").remove().insertAfter($("#maininner"));
        $(".email").remove().insertAfter(("#maininner"));

        },

        invalid: function() {
        $("#sidebar-a").remove().insertAfter($("#maininner"));
        $(".twitter").remove().appendTo($(".grid-box.width100.grid-v"));
        $(".email").remove().appendTo($(".grid-box.width100.grid-v"));

        }
    });

提前感谢您的帮助！ :D

【问题讨论】：

我认为使用纯 css 解决方案会让您的生活更轻松。它将自动处理删除和重新出现。 Media Queries \ W3C

标签： jquery css

【解决方案1】：

我认为最好的方法是使用$.clone() 来克隆.twitter 和.email 值。然后隐藏原件。如果宽度发生变化，请重新评估当前宽度，然后相应地更改可见性。

【讨论】：

【解决方案2】：

当您可以为此使用简单的 css 规则时为什么要使用 jQuery，请注意，您只需将其添加到您的 css 文件即可实现：

@media screen and (max-width: 959px) {
    .twitter,.email{
        display: none;
    }
}

您可以根据屏幕大小隐藏或显示内容，而不是删除和附加内容。

【讨论】：