CSS3 - 基于媒体查询的自动折叠 DIV

Question

场景:

---

注意:我正在尝试完全通过 CSS3 来完成此操作，而不使用任何 Javascript/JQuery/等。问题的解决方案需要纯粹在 CSS 中(请不要使用脚本!!!)

---

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

当屏幕宽度 > 700px 时，布局如上(header + 2 列)。

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

菜单本身通过 Expander 实现具有展开/折叠操作。应该发生的是，当屏幕从 > 700px 调整到 < 700px 时(即，当布局更改时)，菜单应该折叠。

问题:

问题是当我尝试折叠媒体查询中的菜单时，菜单再也不会展开，因为媒体查询强制属性保持不变!展开/折叠通过设置或删除“display: none;”发生属性。

不胜感激。

Answer 1

最简单的解决方案是避免直接设置显示属性(我假设您使用 JS - 您没有解释“Expander 实现”的含义)。相反，切换菜单上的类名，并使用媒体查询为其设置样式范围。

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