Question

情境：

注意：我试图通过CSS3完全做到这一点，而不使用任何Javascript / JQuery /等。问题的解决方案需要纯粹在CSS（请不要脚本!!!）

屏幕布局是Header + 2列布局。标题具有站点标题等。左侧列设置为屏幕宽度的大约25％并包含一组菜单。右侧列是屏幕的其余部分，包含页面的“内容”。

当屏幕宽度> 700px，布局如上（标题+ 2列）。

但是当屏幕宽度<1时700px，布局应该更改为单个列。这里的顺序是Header，然后是菜单，然后是内容。

菜单本身通过Expander实现进行扩展/折叠操作。应该发生的是当从＆gt;调整屏幕大小时。 700px至＆lt; 700px（即，当布局改变时），菜单应该崩溃。

问题：

问题是当我尝试折叠媒体查询中的菜单时，菜单永远不会再次展开，因为媒体查询强制属性保持不变！通过设置或删除“display：none;”进行展开/折叠属性。

非常感谢指针。

Answer 1

最简单的解决方案是避免直接设置显示属性（我假设你使用JS做 - 你没有解释你的意思＆＃34; Expander实现＆＃34;）。而是在菜单上切换一个类名，并使用媒体查询确定其样式。

@media only screen and (max-width: 699px) {
    .menu.disabled {
        display: none;
    }
}