javascript - 函数比较宽度元素

Question

我正在尝试检索元素 sidebar 的宽度，将其与绝对值 250px 进行比较，以适应我的菜单，但我不确定如何继续.

我需要知道菜单何时打开或关闭，以便在菜单关闭时删除项目。抱歉在开始时提供的信息很少。

完整的JS代码

$(document).ready(function() {

  function toggleSidebar() {
    $(".button").toggleClass("active");
    $(".sidebar").toggleClass("widthSidebarJs");
    $(".sidebar-item").toggleClass("active");
  }

  $(".button").on("click tap", function() {
    toggleSidebar();
  });

  var maxSizeSidebar = 250;
  var widthSidebar = $(".sidebar").innerwidth(); 

  function displayForXsSidebar(){
    if (widthSidebar < maxSizeSidebar){
      $(".displayForXs").toggleClass("displayXs");
   }
 }

  $(document).keyup(function(e) {
    if (e.keyCode === 27) {
      toggleSidebar();
    }
  });

});

Answer 1

正如我所猜测的，您需要在调整大小时添加/删除 displayXs 类。您可以尝试添加 resize() 事件监听器。

类似这样的事情:

$(window).on('resize', function(){
  if (widthSidebar < maxSizeSidebar){
    $(".displayForXs").addClass("displayXs");
  } else {
    $(".displayForXs").removeClass("displayXs");
  }  
})

但更好的方法是 @media - 在 css 中查询。