在移动视口隐藏或删除 div 类？答案

【问题标题】：Hide or remove a div class at mobile viewport?在移动视口隐藏或删除 div 类？
【发布时间】：2014-01-16 03:43:12
【问题描述】：

首先，我非常了解 CSS 媒体查询。我的问题是：当您将 div 类堆叠在一个 div 中时；示例：

<div class="class1 class2"></div>

你想删除“class2”@media (max-width: 768px) 创建以下输出：

<div class="class1"></div>

...一旦达到 768px 阈值。

到目前为止，除了这个非功能性代码之外，我什么也没想到：

<script>
 jQuery(document).resize(function () {
  var screen = $(window)    
   if (screen.width < 768) {
    $(".class2").hide();
  }
     else {
       $(".class2").show();
      }
  });
</script>

我真的很难找到适合这个问题的答案。我不想阻止整个 div 的内容！只需删除两个类之一。

【问题讨论】：

在这种情况下，“响应式设计”是否意味着将 .class2 的样式放入 @media (min-width: 768px) { … } 而不是通过 JS 删除类？ IE。您无需更改 DOM，而是将样式分类为断点。

标签： javascript jquery html css responsive-design

【解决方案1】：

$(".class2").removeClass("class2")

你应该听window而不是document，所以你可以修改你的代码如下：

<script>
 jQuery(window).resize(function () {
  var screen = $(window)    
   if (screen.width < 768) {
    $(".class2").removeClass("class2");
  }
     else {
       $(".class1").addClass("class2");
      }
  });
</script>

当然，如果您希望所有 class1 元素在屏幕宽度大于 768 时具有 class2，这只会正确切换 class2。如果您不希望这样，只需添加一个额外的类没有效果，但作为一个标志，指示哪些元素应该有class2。

【讨论】：

这种方法不走运，但谢谢。它仍在页面上打印“class2”。
如果您正在检查窗口是否已调整大小，您可能希望将其从 document 更改为 window。即使调整了窗口大小，文档也可能仍然是相同的大小，因此事件处理程序甚至不会被触发。

【解决方案2】：

我不确定我明白了，但你只是想切换一个类吗？

$(window).on('resize', function () {
    $('.class1').toggleClass('class2', $(window).width() < 768);
});

FIDDLE

jQuery 具有现成的addClass()、removeClass() 和toggleClass() 方法。

请注意，screen 已在 javascript 中定义。

【讨论】：

不，尝试删除一个类，同时保留另一个类。
因此，一旦窗口大小低于 768 像素就将其删除，并且永远不要再次添加它，如果您在调整窗口大小时尝试再次添加它，那么您实际上是在切换类。
同意。我正在尝试将其添加回来。
你就是男人！也许我的问题措辞不正确，但我对您的代码唯一要做的就是将小于更改为大于，并且效果很好！
谢谢——我忘了说。 :)

【解决方案3】：

使用 jQuery .removeClass() 方法：

 $(document).resize(function () {
     var screen = $(window);  

     if (screen.width < 768) {
         $('div').removeClass('class2');
     } else {
         $('div').addClass('class2');
     }

或者：

     screen.width < 768 ? $('div').removeClass('class2') : $('div').addClass('class2');
  });

【讨论】：

您不能使用addClass 多次添加同一个类。测试一下，你不会得到'
'。 $('<div class="class2">').addClass("class2") 返回<div class="class2">
你知道删除不必要的块比输入评论要少。
@millimoose，你是对的。但我没有代表这样做（需要 2000 个代表），这个答案和我的唯一区别是检查班级是否已经在那里，所以我认为尝试这样做没有帮助编辑它。
@RustyToms – 我正在向该问题的作者致辞 :)

【解决方案4】：

上述解决方案对我不起作用。我找到了这个，效果很好！

https://codepen.io/richerimage/pen/jEXWWG

jQuery(document).ready(function($) {
  var alterClass = function() {
    var ww = document.body.clientWidth;
    if (ww < 600) {
      $('.test').removeClass('blue');
    } else if (ww >= 601) {
      $('.test').addClass('blue');
    };
  };
  $(window).resize(function(){
    alterClass();
  });
  //Fire it when the page first loads:
  alterClass();
});

body {
  font: normal 16px/1.5em sans-serif; 
  color: #111;
}

code {
  background: #ccc;
}

.test {
  background: #fffccc;
  border: solid 3px rgba(0,0,0,0.1);
  margin: 20px;
  padding: 40px 20px;
}

.test.blue {
  background: dodgerBlue;
}

.test.green {
  background: green;
}

<div class="test">
  <h3>Hello World</h3>
  <p>The class of <code>blue</code> is added when I am wider than 600px and is removed when I am 600px or less in width.</p>
</div>

【讨论】：