在移动视口中隐藏或删除div类？ [英] Hide or remove a div class at mobile viewport?

问题描述

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

First and foremost, I am very aware of CSS media queries. My problem is this: When you have div classes stacked in one div; Example:

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

你想删除class2@media（max-width：768px）
创建输出：

And you want to remove "class2" @media (max-width: 768px) Creating an output of:

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

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

...once the 768px threshold has been reached.

到目前为止，除了这个非功能性代码之外我还没有提出任何其他内容：

So far I have come up with nothing other than this non-functional code:

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

我真的很难找到适用于此的答案。我不想阻止整个div的内容！只需删除两个类中的一个。

I am really having a hard time finding an answer that works for this. I do not want to block the entire div's contents! Just remove one of two classes.

推荐答案

我不确定我是否会这样做，但你只是想尝试切换课程？

I'm not sure I get this, but are you just trying to toggle a class?

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

FIDDLE

jQuery有 addClass（）， removeClass（）和 toggleClass（ ）方法随时可用。

jQuery has addClass(), removeClass() and toggleClass() methods readily available.

请注意屏幕已在javascript中定义。

Note that screen is already defined in javascript.

这篇关于在移动视口中隐藏或删除div类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！