Question

当max-width为959px时，我使用jquery从原始位置删除两个div .twitter 和 .email ，并将这两个div放在div之后 #maininner 即可。

当最大宽度大于959像素时，我希望这两个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

Answer 1

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

Answer 2

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

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

您可以隐藏或显示内容，而不是删除和附加内容，具体取决于屏幕尺寸。

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

2 个答案: