css 当 windows 太小时隐藏边栏

xoshrz7s 于 2023-03-05 发布在 Windows

关注(0)|答案(3)|浏览(128)

我用一个按钮把侧边栏藏起来了。
但是当视图低于991px时，我想隐藏侧边栏，以便为我的网站提供更多空间。
我该怎么做呢？如果我把代码放在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 ) {

}

css

来源：https://stackoverflow.com/questions/49013350/hide-sidebar-when-viewport-is-too-small

3条答案

按热度按时间

h5qlskok1#

您可以使用纯CSS（EDIT：如果你想toogle类，你需要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>

赞(0）回复(0）举报 2023-03-05

lrpiutwd2#

你可以尝试用css如下：

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

否则您可能会感染resize event

赞(0）回复(0）举报 2023-03-05

neskvpey3#

使用jQuery获取窗口的宽度。

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

赞(0）回复(0）举报 2023-03-05

我来回答

css 当 windows 太小时隐藏边栏

3条答案

相关问题

热门标签

最新问答