使jQuery .show（）基于媒体查询分配显示

Question

根据jQuery文档，.hide（）效果存储元素的显示值，以便在调用.show（）时恢复它。

  

匹配的元素将立即隐藏，无动画。   这大致相当于调用.css（＆＃34; display＆＃34;，＆＃34; none＆＃34;），   除了显示属性的值保存在jQuery中   数据缓存，以便以后可以将显示恢复到其初始值。   如果元素的显示值为内联并隐藏，则显示，   它将再次以内联方式显示。

但是，当屏幕宽度为＆gt;时，我的导航UL元素为display:flex;。 768和display:block;显示在最多768的屏幕上。因此，如果您垂直放在iPad上，打开并关闭导航然后旋转到水平位置，导航应为display:flex;现在为{{1 }}

BTW我正在使用@adnantopal的jquery.slimmenu.js。我尝试根据display:block;添加.css('display:flex');来覆盖它，但以Slimmenu的命令为准。

Answer 1

<强>使用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...
        }