Question

我有一个响应式设计，可从数据库中选择可选的侧边栏数据。在屏幕宽度小于751像素的情况下，该侧边栏将成为屏幕左侧的拉出标签。由于数据量很大，我无法在状态更改（侧边栏到标签，反之亦然）上重新加载数据。所以，解决方案似乎是使用选项卡状态（使用MB Extruder - 一个＆＃34;隐藏＆＃34; tab实用程序）作为侧边栏，并且只是改变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();
});

注意检查display-state的额外if子句：
if ($('.extruder.left .flap').css('display') != 'block') {
和
} else if ($('.extruder.left .flap').css('display') != 'none') {

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

我还更改了你的脚本以更有效地使用jQuery。这样您就不必创建命名函数并将其调用两次。（我总是将window.resize放在window.load而不是document.ready内，因为如果你需要扩展只在load之后才能正常工作的东西，但为了你的目的，两者都可以工作。）

使用Javascript / jQuery检测屏幕宽度 - 侧边栏到标签拉出

1 个答案: