javascript - 使用 Javascript/jQuery 进行屏幕宽度检测 - 选项卡式拉出的侧边栏

Question

我有一个响应式设计，带有从数据库中提取的可选侧边栏数据。在屏幕宽度小于 751 像素时，该侧边栏将成为屏幕左侧的拉出选项卡。由于数据量很大，我无法切实地重新加载状态更改的数据(侧边栏到选项卡，反之亦然)。因此，解决方案似乎也使用选项卡状态(使用 MB Extruder - 一个“隐藏”选项卡实用程序)作为侧边栏，并且只是更改 div 的状态。但是，如果没有 javascript，这是无法做到的，因为在侧边栏状态下，Extruder 需要打开，而在选项卡状态下需要关闭。

因此，我正在执行以下操作来设置侧边栏/标签:

$(document).ready(function()
{
    CheckScreen();
},
$(window).resize(function()
{
    CheckScreen();
}));
function CheckScreen()
{
    var ww=$(window).width();
    if(ww < 751)
    {
        $('#extruderLeft').closeMbExtruder();
        $('.extruder.left .flap').css('display', 'block'); // The tab
        $('.site_wrapper').css('padding-left', '30px');
    }
    else
    {
        $('#extruderLeft').openMbExtruder(true);
        $('.extruder.left .flap').css('display', 'none');
        $('.site_wrapper').css('padding-left', '0px');
    }
}

当屏幕宽度小于 751 像素时，这会将状态从侧边栏列更改为隐藏状态，屏幕左侧有一个小选项卡。这在 document.ready 上的任何大小的屏幕上都可以正常工作。将浏览器的一侧从大拖到小时，它会调整得很好。但是，当向外拖回到更大的宽度时，div 会相当随机地从一种状态切换到另一种状态。

也许有更好的方法来完全做到这一点。如果情况变得更糟，我可以让两个单独的实体(侧边栏和选项卡状态)保存相同的数据，并且只使用 CSS，但这将是可笑的冗余。

Answer 1

问题似乎是 if 子句中的错误条件(请参阅问题下的评论)。

这应该可以解决问题:

$(window).load(function() {
  $(window).resize(function() {
    if ($(window).width() < 751) {
      if ($('.extruder.left .flap').css('display') != 'block') {
        $('#extruderLeft').closeMbExtruder();
        $('.extruder.left .flap').css('display','block'); // The tab
        $('.site_wrapper').css('padding-left','30px');
      }
    } else if ($('.extruder.left .flap').css('display') != 'none') {
      $('#extruderLeft').openMbExtruder(true);
      $('.extruder.left .flap').css('display','none');
      $('.site_wrapper').css('padding-left','0');
    }
  }).resize();
});

注意检查显示状态的额外 if 子句:
if ($('.extruder.left .flap').css('display') != 'block') {
和
} else if ($('.extruder.left .flap').css('display') != 'none') {

这确保侧边栏/制表符开关仅出现在指定屏幕宽度的断点上，并且不会不必要地执行 if 子句。

---

我还稍微更改了您的脚本以更有效地使用 jQuery。这样您就不必创建命名函数并调用它两次。 (我总是将 window.resize 放在 window.load 而不是 document.ready 中，因为如果你需要缩放只有在 之后才能正常工作的东西code>load 无论如何，但为了您的目的，两者都可以。)