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

Question

首先,我非常了解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的内容!只需删除两个类中的一个.

Answer 1

我不确定我能得到这个,但你只是想尝试切换课程吗？

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

小提琴

jQuery具有随时可用的addClass(),removeClass()和toggleClass()方法.

请注意,screen已在javascript中定义.