Question

我用按钮隐藏侧边栏。

但是当视图得到991px以下时我想隐藏侧边栏以便为我的网站留出更多空间。

我该怎么做？如果我把代码放在里面，如果它总是会切换。如果尺寸大于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>

Answer 2

您可以尝试使用css，如下所示：

@media (min-width:991px) {
    //Do your css things
}

否则你可以抓住resize event

Answer 3

使用jQuery获取窗口的宽度。

if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); }

视口太小时隐藏侧边栏

3 个答案: