切换@media样式表时如何恢复显示：阻止？

Question

我有一个带有左侧菜单的 Web 应用程序。该菜单在浏览器窗口较宽（例如，桌面）时很有用，但在窗口较窄（例如，移动设备）时会占用太多空间。

使用 css @media 的东西，我可以做到，如果你让浏览器窗口小于某个调整大小的宽度，它将切换到移动模式。在这种模式下，我仍然希望菜单可用，但在用户单击按钮将其显示之前将其隐藏。

这很容易，但我遇到了问题。如果是普通桌面用户：

1. 切换到移动模式（将浏览器调整为小于调整宽度）
2. 打开菜单（javascript 将其display: 设置为block）
3. 关闭菜单（js 将其display: 设置为none）
4. 切换回桌面模式（将浏览器重新调整为宽屏）

然后菜单仍然使用display:none 并且是不可见的，即使它在桌面模式下应该始终可用。

这是working illustration of the problem。

我的问题：我能做些什么来防止这种情况发生吗？也许有一种方法可以检测浏览器何时切换它正在使用的样式表，并在重新进入桌面模式时将菜单栏重置为display:block？

基本 HTML 代码：

<link rel="stylesheet" href="desktop.css" media="all and (min-width: 600px)"/>
<link rel="stylesheet" href="mobile.css" media="all and (max-width: 600px)"/>
...
<div id="left"> ... menu bar ... </div>
<div id="right"> ... content ... </div>

移动样式表：

#left { display: none; position: fixed; z-index: 100; ... }
#right { left: 0px; ... }

桌面样式表

#left { display: block; position: fixed; left: 0; ...}
#right { position: fixed; left: 170px; ...}

用于切换菜单的Javascript

function toggleLeft() { $("#left").toggle(); } // Using jQuery

非常感谢！！

Answer 1

这是我自己经常遇到的问题。我倾向于使用类而不是直接在移动设备中隐藏/显示菜单。例如：

function toggleLeft() { $("#left").toggleClass("active"); }

然后在您的 CSS 媒体查询中，仅使用移动样式表中的 .active。

#left { display: none; position: fixed; z-index: 100; ... }
#left.active { display: block; }

Answer 2

我认为您可能应该在窗口调整大小时使用 jQuery 切换 css：

jQuery on window resize

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.height() >= 820) { /* toggle css or class etc */ }
    if (win.width() >= 1280) { /* ... */ }
});

这样，当浏览器再次放大时，您可以将类切换或更改回原来的样子！

Answer 3

看起来toggle() 在node 上设置了实际的style，这将覆盖css。

您可以尝试将 !important 添加到您的 css 中，这样它会覆盖桌面模式下的样式，但这有点 hacky。

Answer 4

问题是您的 desktop.css 中的 display: block; 的优先级低于按元素属性样式直接设置样式：

<div id="left" style="display: none"> ... </div>

这正是 javascript 的 toggle() 所做的。 最好的方法是切换类。但是，您可以简单地将 display: block !important 添加到您的 desktop.css 中。 !important 的样式不会被直接样式更改。