如何仅对特定媒体查询使用jquery .css（）？

Question

当用户的浏览器宽度小于1160像素时，会设置媒体查询以折叠我的网站的右侧边栏。 他们可以通过点击一个小箭头将其取回，然后它将与内容重叠（绝对定位）。

无论如何，我使用以下jQuery来实现这一目标：

$('.right_sidebar_preview').on('click', function() {
     $('.right_sidebar_preview').css('display', 'none');
     $('.right_sidebar').css('display', 'block');
});
$('.right_sidebar').on('click', function() {
     $('.right_sidebar_preview').css('display', 'block');
     $('.right_sidebar').css('display', 'none');
});

所以基本上当浏览器大于1160px并且边栏可见时我已经隐藏了预览，在我设置的媒体查询中，当它低于1160px时，侧边栏变得不可见，并且“侧边栏预览”显示哪些用户可以点击使其变大。

CSS：

.right_sidebar {
  width: 242px;
  height: 100%;
  background-color: #d8e1ef;
  float: right;
  position: relative;
}
.right_sidebar_preview {
  display: none;
}
@media(max-width:1160px) {
  .right_sidebar {
    position: absolute;
    right: 0;
    display: none;
  }
  .right_sidebar_preview {
    display: block;
    background-color: #d8e1ef;
    position: absolute;
    right: 0;
    width: 15px;
    height: 100%;
  }
}

我的问题是，当我使用上面的代码时，假设我们处于不到1160px的媒体查询中，我会打开侧边栏然后再次折叠它，当我伸出浏览器返回时，它也关闭了侧栏上大于1160px的媒体查询。

那么无论如何我可以使用.css（）（或替代方法）来指向特定的媒体查询？

Answer 1

不要操纵CSS display: property。 相反，使用CSS类来控制侧边栏及其句柄的可见性。 这样，您可以使用媒体查询来控制元素是否显示。

在下面的演示中，单击“整页”按钮以查看其在屏幕上的工作方式> 1160px。

 $(function() { $('.right_sidebar, .right_preview').on('click', function() { $('.right_sidebar, .right_preview').toggleClass('lt-1160-hide lt-1160-show'); }); }); 

 .right_sidebar { width: 100px; height: 100px; background-color: papayawhip; float: left; display: block; } .right_preview { width: 20px; height: 100px; background-color: palegoldenrod; float: left; display: none; } @media(max-width: 1160px) { /* note: the following rules do not apply on larger screens */ .right_sidebar.lt-1160-show, .right_preview.lt-1160-show { display: block; } .right_sidebar.lt-1160-hide, .right_preview.lt-1160-hide { display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="right_sidebar lt-1160-hide">Sidebar</div> <div class="right_preview lt-1160-show">&rsaquo;</div> 

Answer 2

在最近的一个项目中，我不得不根据浏览器大小处理jQuery中的单个函数。 最初我要检查设备宽度是否适用于移动设备（320px）：

jQuery的

$(window).resize(function(){

       if ($(window).width() <= 320) {  

              // your code here

       }     

});

要么

$(window).resize(function(){     

       if ($('header').width() == 320 ){

              // your code here

       }

});

Answer 3

像这样的东西？

$(window).resize(function(){
   if ($(window).width() <= 1160){  
      // lets party
   }    
});