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

我有一个反应灵敏的设计，可以从数据库中选择边栏数据。当屏幕宽度小于751像素时，该侧边栏将成为屏幕左侧的一个下拉选项卡。我无法切实地将状态更改侧边栏上的数据重新加载到选项卡，反之亦然，因为数据量很大。因此，解决方案似乎是使用MB挤出机的选项卡状态——一个隐藏的选项卡实用程序作为侧栏，并且只是更改div的状态。但是，如果没有javascript，这是无法实现的，因为在侧栏状态下，挤出机需要打开，而在选项卡状态下则需要关闭

因此，我将执行以下操作来设置侧栏/选项卡：

$(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，但这将是荒谬的冗余。

问题似乎是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子句： 如果$'.EXPRESS.left.flap'.css'display'！='块'{ 和 }否则，如果$'.EXPRESS.left.flap'.css'display'！='没有{

这样可以确保侧栏/选项卡开关仅出现在指定屏幕宽度的断点上，并且不会不必要地执行if子句

---

我还对您的脚本做了一些修改，以更有效地使用jQuery。这样，您就不必创建命名函数并调用它两次。我总是将window.resize放在window.load中，而不是document.ready中，因为如果您需要缩放只在加载后才能正常工作的内容，但出于您的目的，这两个功能都可以工作。

您能让一把小提琴？很难理解你在问什么。我可以，但要使它精确复制是不可能的。我正在编辑上面的例子，希望能提供更好的解释。问题主要涉及屏幕大小改变时用来改变div状态的方法。就这段代码而言，它看起来应该可以工作，梅openMbExtruder中有什么东西触发背面更改注意：在if子句中，检查$'.EXPRESS.left.flap'.css'display'！='block'{在第一个和第二个if子句中，显然要检查'none'，否则if子句中的所有内容都会在每个像素resizedSidenote上执行：$window.loadfunction{$window.resizefunction{如果$window。width@RationalRabbit我无法准确地理解你做了什么不起作用，而不是我做了什么起作用，以及我的解决方案是否在没有任何其他更改的情况下完美工作。如果我忘记了什么，请发表评论，我会更正它，使答案完整。非常感谢，我的朋友！我只需要添加一个缩写I加载和调整大小$'ExpressureLeft'.openMbExtrudertrue；$'.Expressure.left.flap'.css'display'、'none'；$'.site_wrapper'.css'padding-left'、'0'之间的转换，以便边栏最初出现在更大的屏幕上可能有更好的方法that@RationalRabbit有点违背我先前的建议，但在这种情况下，请尝试如果您可以使用document.ready而不是window.load，请查看它是否可以正常工作。原因是，如果您使用document.ready，您首先“显示”侧边栏，然后立即将其再次隐藏。如果您使用document.ready，则有一个较小的更改，用户将实际看到所有这些情况。实际上，window.load比document.ready.document工作得更好.ready会导致轻微的屏幕闪烁，而window.load会从左侧滑入侧边栏，使其产生动画效果，而不是像打嗝一样。感谢您的帮助。