javascript - 使用 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;
      }
    }
  }
});