javascript - 如何仅在特定媒体查询上使用 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%;
  }
}

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

那么我是否可以使用 .css()(或替代方法)指向特定的媒体查询？

Answer 1

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

在下面的演示中，单击“整页”按钮以查看它在大于 1160 像素的屏幕上的工作原理。

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