使用jquery切换按钮

Question

当窗口变得太小时，我做了一些媒体查询来隐藏侧边菜单。问题是，我不能再次切换菜单，因为它在css上是硬编码的。

所以我试着点击按钮隐藏侧边栏。但是在我调整大小时它会多次点击。

当窗口小于991px但是当我点击按钮时仍然可以再次显示侧边菜单时，我该怎么做？

$(window).resize(function() {
  var width = $(document).width();
  if (width < 991) {
    $('#sidebar-btn').click();
  }
});

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

#sidebar {
  background: #fafafa;
  border-right: 2px solid #e5e5e5;
  width: 200px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  overflow-x: hidden;
  transition: left 1s ease;
}

@media screen and (max-width: 991px) {
  #sidebar {
    left: -200px !important;
  }
  .content-wrapper {
    background: #fff;
    margin-left: 0;
    min-height: 100vh;
    padding: 1rem 1.5rem;
    margin-bottom: 70px;
    transition: all 1s ease;
  }
}

Answer 1

您可以使用标志变量来保持侧栏的隐藏/可见状态。

var sidebarIsVisible = true;
$(window).resize(function() {
  var width = $(document).width();
  if (width < 991) {
    if (sidebarIsVisible) {
      // Will happen only once now
      $('#sidebar-btn').click();
      sidebarIsVisible = false;
    } else {
      if (!sidebarIsVisible) {
        // Make visible if width is greater than 991 and sidebar is invisible
        $('#sidebar-btn').click();
        sidebarIsVisible = true;
      }
    }
  }
});

Answer 2

为什么不使用#sidebar jQuery在width小于991时隐藏hide()

$(window).resize(function() {
  var width = $(document).width();
  if (width < 991) {
    $('#sidebar').hide();
  }else{
    $('#sidebar').show();
  }
});

Answer 3

992px及以上 - 显示#sidebar并隐藏#sidebar-btn

#sidebar{
    display: block;
}
#sidebar-btn{
    display: none;
}

对于991px及以下 - 隐藏#sidebar并显示#sidebar-btn

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

现在使用#sidebar-btn上的切换侧栏单击

$('#sidebar-btn').click(function (){
    $('#sidebar').toggle();
});