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

Question

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

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

b）如果带的屏幕小于一定大小，则隐藏div，但允许用户显示它。

我正在努力使这两个需求正确地交互。

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

使这变得更加复杂的是div包含一个表单。所以我不能简单地在两个不同的div中重复它并在它们之间切换，因为这样做要么意味着重复元素ID要么意味着两个不同的形式，这两者在本场景中都不可能。

有人有什么建议吗？我对jQuery解决方案、Foundation解决方案或纯javascript解决方案都持开放态度，只要它能工作就行！

Answer 1

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