javascript - 在小屏幕上折叠 div，在大屏幕上展开 -javascript

Question

如何制作一个简单的脚本，根据加载时的屏幕尺寸和屏幕调整大小来扩展/缩小 div？我是java脚本新手，这是我当前的代码。它是平板电脑和手机上默认折叠的菜单，可单击以展开其内容。但在台式机和笔记本电脑上，它已经默认扩展。

if ( $(window).width() > 600) {     
        $(function(){
  $('.header').click(function(){
    $(this).closest('.container').toggleClass('collapsed');
  });
});
 //container is expanded on large screen resize or load
}
else {
//container is collapsed on load or screen resize or load
}

.container{
  width:300px;
  background:#ccc;
  margin:10px;
  float:left;
}

.header{
  background:url('http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png') no-repeat;
  background-position:right 0px;
  cursor:pointer;
}

.collapsed .header{
  background-image:url('http://cdn2.iconfinder.com/data/icons/vaga/arrow_down.png');
}

.content{
  height:auto;
  min-height:100px;
  overflow:hidden;
  transition:all 0.3s linear;
  -webkit-transition:all 0.3s linear;
  -moz-transition:all 0.3s linear;
  -ms-transition:all 0.3s linear;
  -o-transition:all 0.3s linear;
}
.collapsed .content{
  min-height:0px;
  height:0px;
}

<div class="container">
  <div class="header">Bla blah</div>
  <div class="content">
    <p> Some content here </p>
  </div>
</div>

http://jsfiddle.net/AMzfe/1002/

Answer 1

您可以通过使用调整窗口大小时触发的 jquery resize 事件来实现这一点。 只需添加监听调整大小事件的代码，测量新的窗口大小，然后根据窗口的新大小折叠或展开 div。

var setDivsState=function(){
    if ( $(window).width() < 600) {
        $(function(){
            $('.header').click(function(){
                $(this).closest('.container').addClass('collapsed');
            });
        });
        //container is expanded on large screen resize or load
    }
    else {
        $(function(){
            $('.header').click(function(){
                $(this).closest('.container').removeClass('collapsed');
            });
        });
        //container is collapsed on load or screen resize
    }
}
$(window).resize(setDivsState); 

您还应该在窗口首次加载时调用 setDivsState 函数。

这里有更多关于调整大小事件的文档 jquery docs还有这个stackoverflow question这里有更多详细信息