javascript - 当视口(viewport)太小时隐藏侧边栏

Question

我用一个按钮隐藏了侧边栏。

但是当 View 小于 991 像素时，我想隐藏侧边栏以便为我的站点留出更多空间。

我该怎么做？如果我将代码放在 if 中，它将始终处于切换状态。如果尺寸大于 991px，它应该再次显示侧边栏

   $('#sidebar-btn').click(function () {
   $('#sidebar').toggle('visible');
   $('.content-wrapper, .full-page-wrapper').toggleClass('content-wrapper full-page-wrapper');
});

//toggle sidebar when width is too small
var browserWidth = $(window).width();
if(browserWidth <= 991 ) {

}

Answer 1

您可以为此使用纯 CSS(编辑:如果您想切换类，您需要 JS)。

if(!($(window).width() <= 911)) {
  $('.content-wrapper').toggleClass('content-wrapper');
  $('.full-page-wrapper').toggleClass('full-page-wrapper');
}

@media screen and (max-width: 911px) {
  #sidebar {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="sidebar" class="content-wrapper full-page-wrapper">AAAAAAAAAA</section>