使用JavaScript / jQuery的屏幕宽度检测 - 侧边栏至标签式拉动

Question

我具有响应式设计，可从数据库中绘制可选的侧栏数据。在屏幕宽度小于751像素的情况下，该侧边栏成为屏幕左侧的拉出选项卡。由于数据量的广泛数量，我无法可行地重新加载有关状态更改的数据(侧边栏到选项卡，反之亦然(。因此，该解决方案似乎正在使用选项卡状态(使用MB挤出机 - "隐藏的"选项卡实用程序(作为侧边栏，并且只是更改DIV的状态。但是，如果没有JavaScript，就无法完成，因为在侧边栏状态下，需要打开挤出机，而在Tab状态中需要关闭。

。

所以，我正在执行以下操作以设置侧边栏/选项卡：

$(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.udred.ready上的任何尺寸屏幕上都可以正常工作。将浏览器的侧面从较大到更小时拖动时，它会罚款。但是，当拖回更大宽度时，DIV将是随机的，从一个状态切换到另一种状态。

也许有一种更好的方法可以完全做到这一点。如果更糟糕的是，我可以拥有两个单独的实体(侧边栏和选项卡状态(，只使用CSS，但这是可笑的。

Answer 1

这个问题似乎是if-clauses中的错误条件(请参阅问题下的注释(。

这应该可以解决：

$(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-lif-lif-lif-clauses：
if ($('.extruder.left .flap').css('display') != 'block') {
和
} else if ($('.extruder.left .flap').css('display') != 'none') {

这要确保侧栏/tab-switch仅发生在指定的屏幕宽度的断点，并且不必要地执行了if-clauses。

---

我还更改了您的脚本以更有效地利用jQuery。这样，您就不必创建命名函数并将其称为两次。(我总是将window.resize放入window.load而不是document.ready中，因为如果您需要扩展仅在load之后正常工作的内容，但出于您的目的，两者都可以。(