javascript - 使 jQuery .show() 根据媒体查询分配显示

Question

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

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.

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

顺便说一句，我正在使用 jquery.slimmenu.js来自@adnantopal。我试图通过添加 .css('display:flex'); 来覆盖它，具体取决于 $(window).width() 但 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...
        }