根据屏幕大小显示/隐藏 div 元素，但允许通过单击按钮来反转

Question

我有一个网站，我希望能够根据用户输入（单击/点击按钮）和屏幕大小显示或隐藏 div：

a) 如果屏幕宽度大于某个尺寸，则显示 div 但允许用户隐藏它。

b) 如果屏幕小于一定尺寸，隐藏 div 但允许用户显示它。

我正在努力让这两个要求正确交互。

我正在使用 Foundation 5 和 jQuery，所以这两个部分都是可能的 - Foundation 的“show-for-foo-up”处理初始可见性，并且有许多 jQuery 函数允许在可见和隐藏之间切换 div。 但是我似乎无法做的是找到一种方法来允许用户单击以显示最初被 Foundation 的媒体查询隐藏的 div，或者进行纯 jQuery 切换（忽略 Foundation）设置初始可见性的方法根据屏幕尺寸。

使这更复杂的是 div 包含一个表单。 所以我不能简单地在两个不同的 div 中重复它并在它们之间切换，因为这样做意味着重复的元素 id 或两个不同的 forms，这两种情况在这种情况下都是不可能的。

有没有人有什么建议？ 我愿意接受 jQuery 解决方案、基础解决方案或纯 javascript 解决方案，只要它有效！

Answer 1

是的，CBroe 的评论让我走上了正确的道路，此后我的假设是正确的。 它所需要的只是使用 jQuery 更改 div 的 class 以添加或删除使用媒体查询的 class 。 不知道为什么我以前没有想到这个，真的。