Question

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

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

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

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

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

我的问题：我能做些什么来防止这种情况发生？也许是一种方法来检测浏览器何时切换它正在使用的样式表，并在重新进入桌面模式时将菜单栏重置为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

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

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

这正是javascript的toggle（）所做的。最好的方法是切换课程。但是，您只需将display: block !important添加到desktop.css即可。直接样式不会更改!important的样式。

Answer 3

我认为你应该在窗口调整大小时使用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 4

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

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

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

基本HTML代码：

移动样式表：

桌面样式表

用于切换菜单的Javascript

4 个答案: