可折叠面板和调整浏览器大小

Question

我已经设置了这个codepen来最好地解释我想要做的事情。

http://codepen.io/cfed/full/pfvwr

我正在使用媒体查询来隐藏第四个div的内容区域，并在浏览器小于1300px时将div修复到父容器的底部。我是他们使用jquery来切换这个div的可见性。这部分工作正常。

我想从这里实现的是以下内容 -

• 当浏览器大于1300px时，始终显示div。即如果有人最小化浏览器，切换可见性然后返回到更宽的视图，它应该返回到原始位置。目前它可以以最小化状态返回。
• jquery功能仅在浏览器小于1300px时才有效。因此，当浏览器大于1300px时单击链接不会执行任何操作。

非常感谢任何帮助我指出正确方法的帮助。

Answer 1

在这里：http://codepen.io/anon/full/dcBsg

要在浏览器窗口宽度超过1300像素时显示内容区域，您只需向$(window).resize添加一个事件监听器，如果内容区域不可见，则会显示该内容区域（在{时，您的媒体查询被覆盖） {1}}更改元素的CSS）。

当浏览器宽度超过1300像素时，防止内容区域被隐藏在第一位，就像检查窗口宽度一样简单，如果窗口宽度过宽则不采取任何措施。