根據屏幕大小顯示/隱藏 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 。 不知道為什么我以前沒有想到這個，真的。