Question

我有一个自适应的WordPress主题，当文档宽度小于768像素时，我希望从带有JQuery的页面中删除侧栏中具有类div的{{1}}元素。我应该使用什么JQuery代码？

Answer 1

不要使用jQuery删除响应式设计中的元素。在您的情况下，如果用户在桌面上浏览并暂时使窗口变小，则元素将消失。然后，如果窗口再次变大，则元素将不会重新出现。

更好的解决方案是使用CSS媒体查询通过为较低分辨率设置display: none来隐藏元素：

@media only screen and (max-width : 768px) {
    #foo { 
        display: none;
    }
}

Answer 2

你可以试试这个

$(".hide").each(function(){
  if($(document).width() < 768){
   $(this).remove();
  }
})

Answer 3

试试这个

if($(document).width() < 768){
      $('.hide').remove();
}

Answer 4

使用CSS可以做得更好但是如果你真的想要Jquery，你可以使用resize()和body上的.hide()事件（这会使它好像不在那里）和.show()（当窗口足够大时将它带回来）隐藏的东西。

$("body").resize(function () {
    if ($(this).width() < 768)
    {
        $(".hide").hide();
    }
    // Code is below for making .hide come back. 
    else {
        $(".hide").show();
    }
});

如果您只想在调整大小低于768像素时完全删除元素，则可以使用：

$("body").resize(function () {
    if ($(this).width() < 768)
    {
        $(".hide").hide();
    }
});

或者：

$("body").resize(function () {
    if ($(this).width() < 768)
    {
        $(".hide").remove();
    }
});

Answer 5

你不应该使用jQuery（或者根本就是JavaScript）。相反，您可以使用CSS和媒体查询。

@media all and (max-width: 767px) {
    .hide {
        display: none;
        visibility: hidden;
    }
}

使用jquery从页面中完全删除元素

5 个答案: