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

我有一个响应式设计，可从数据库中选择可选的侧边栏数据。 在小于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子句检查display-state：
if ($('.extruder.left .flap').css('display') != 'block') {
和
} else if ($('.extruder.left .flap').css('display') != 'none') {

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

---

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