0

当单击另一个 div 时，我正在使用一些 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。所以在测试时，我点击我的按钮，这使得我的模块展开没有问题，当我再次点击按钮时，模块折叠并隐藏它的内容，所以这一切都很好。但是，当我将窗口大小重新调整为 1000 像素时，并且在屏幕较小时隐藏了模块内容，当浏览器窗口恢复到 1000 像素时，内容仍然隐藏，并且我已经隐藏了较大屏幕的按钮，因为这不是必需的。那么当浏览器窗口调整到大于800px的大小时，有什么办法可以重置jquery的效果呢？

4

3 回答 3

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

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

于 2013-08-23T06:03:53.623 回答
0

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

于 2013-08-23T06:03:24.840 回答
0

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

$(window).resize(function() {
    if($(window).width() > 800) {
        $(".module").show();
    }
    else{
        $(".module").hide();
    }
});
于 2013-08-23T06:08:05.473 回答