javascript - 隐藏或删除移动视口(viewport)中的 div 类？

Question

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

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

并且您想删除“class2”@media(最大宽度: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 的内容!只需删除两个类中的一个即可。

Answer 1

我不确定我明白了，但你只是想切换类(class)吗？

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

FIDDLE

jQuery 有 addClass() , removeClass()和 toggleClass()方法一应俱全。

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