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;

}

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

Answer 1

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

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

Answer 2

您可以使用enquire.js将媒体查询回调添加到javascript的库。

Answer 3

使用$.resize()作为调整大小事件处理程序，然后检查宽度是否达到维度。

$(window).resize(function() {
    if($(window).width() > 800) {
        $(".module").show();
    }
    else{
        $(".module").hide();
    }
});

在Jquery函数后重置

3 个答案: