Question

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

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

你想要删除＆＃34; class2＆＃34; @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

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

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

FIDDLE

jQuery提供了addClass()，removeClass()和toggleClass()方法。

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

Answer 2

$(".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>

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

Answer 3

使用jQuery .removeClass()方法：

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

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

OR：

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

Answer 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>

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

4 个答案: