javascript - Jquery函数后重置

Question

我正在使用一些 jquery 在单击另一个 div 时展开它:

    <script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".module").slideToggle("slow");
        });
    });
</script>

这是我的 html:

<div class="flip"></div>
        <div class="module"></div>

它在模块 div 中有很多文本。这是我的 CSS:

 .module {
    width:374px;
    height:100%;
    float:left;
    padding:5px;
    display:none;
}
    .flip {
    width:100%;
    height:25px;
    background-image:url(menu.gif);
    cursor:pointer;

}

我的网站是响应式的，因此当调整浏览器窗口大小时，当屏幕小于 800 像素时，上面的 css 会显示。所以在测试时，我点击我的按钮，这使得我的模块展开不是问题，当我再次点击按钮时，模块折叠并隐藏它的内容，所以这一切都很好。但是，当我将窗口大小调整回 1000px 时，当我的屏幕较小时我隐藏了模块内容，当浏览器窗口回到 1000px 时内容仍然隐藏并且我隐藏了较大屏幕的按钮，因为这不是必需的。那么当浏览器窗口调整到大于800px时，有什么方法可以重置jquery的效果吗？

Answer 1

$(window).resize(function() {
 if($(window).width() > 800) {
  location.reload();
 }
});

使用此脚本检查窗口大小并重新加载