[英]On Media query jquery remove div from sidebar
I am using jquery to remove two divs .twitter and .email from their original positions when the max-width is 959px and place these two divs after the div #maininner . 我使用jQuery来去除两个div .twitter并从原来的位置.email时,最大宽度为959px和DIV #maininner后这两个div地方。
When the max width is larger than 959px, I would like these two divs to go back to their original positions: both are inside their own div class .grid-box.width100.grid-v which are inside #sidebar-a . 当最大宽度大于959px时,我希望这两个div返回其原始位置:两者都位于自己的div类.grid-box.width100.grid-v中 ,它们位于#sidebar-a中 。
The problem is that there are multiple .grid-box.width100.grid-v inside #sidebar-a. 问题是#sidebar-a中有多个.grid-box.width100.grid-v。 How do I get the two divs .twitter and .email to go into the two empty .grid-box.width100.grid-v that they are removed from? 如何将两个div .twitter和.email放入两个空的.grid-box.width100.grid-v中,将它们从中删除?
Note: I am unable to put separate classes on the multiple div class .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"));
}
});
Thanks in advance for any help! 在此先感谢您的帮助! :D :D
I think the best way would be to use $.clone()
in order to clone the .twitter
and .email
values. 我认为最好的方法是使用$.clone()
来克隆.twitter
和.email
值。 Then hide the originals. 然后隐藏原件。 If the width changes, re-evaluate the current width and then change the visibility accordingly. 如果宽度发生变化,请重新评估当前宽度,然后相应地更改可见性。
Why to use jQuery when you can use a simple css rule for this, note that you can achieve that just adding this to your css file: 当您可以为此使用简单的CSS规则时,为什么要使用jQuery,请注意,只需将其添加到CSS文件中就可以实现:
@media screen and (max-width: 959px) {
.twitter,.email{
display: none;
}
}
Instead of remove and append the content, you can hide it or show it depending on the screen size. 您可以根据屏幕尺寸隐藏或显示内容,而不是删除和附加内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.