使jQuery .show（）根据媒体查询分配显示

根据jQuery文档，.hide（）效果存储元素的显示值，以便在调用.show（）时将其恢复。使jQuery .show（）根据媒体查询分配显示

匹配的元素将立即隐藏，没有动画。这大致等同于调用.css（“display”，“none”），，不同之处在于display属性的值保存在jQuery的数据缓存中，以便稍后可以将显示恢复到其初始值。如果一个元素具有内联显示值并且被隐藏然后显示，那么它将再次以内联方式显示。

不过，我有一个display:flex;当屏幕上显示时可达768所以，如果你在iPad上垂直，打开和关闭的导航屏幕宽度为> 768和display:block;然后旋转到导航UL元素水平位置，应该是display:flex;的导航现在display:block;

顺便说一句我正在使用@adnantopal的jquery.slimmenu.js。我试图通过根据$(window).width()添加.css('display:flex');来覆盖它，但Slimmenu的命令占上风。

2016-12-06 zJorge

如果你使用jQuery和具有在CSS这么多的控制，有你认为'.toggleClass（）'而不是添加和删除一个CSS类 - 就像'.hide-me {display：none; }' - 而不是使用.show（）和.hide（）？ –

这是一个很好的，但我试图找到一个解决方案覆盖jquery.slimmenu之前更改其代码。 – zJorge

的Javascript：

CSS @media queries的JavaScript的当量是window.matchMedia：

var minWidth768px = window.matchMedia("(min-width:768px)"); 

if (minWidth768px.matches) { 
    ....CODE HERE... 
    }

的jQuery：

jQuery的等效最接近的是$(window).width()。

但是...你需要知道，$(window).width()自身的意志还包括在窗口的右侧滚动条的宽度。

所以，你需要做这样的事情：

$('body, html').css('overflow', 'hidden'); 
var windowWidth = $(window).width(); 
$('body, html').css('overflow', 'auto');

然后你就可以在jQuery的继续：

if (windowWidth > 767) { 
     ....CODE HERE... 
     }

2016-12-06 22:53:07 Rounin

回答