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事件来实现此目的。只需添加侦听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此处有更多详细信息

Answer 2

您可以使用JavaScript jquery('.dropdown-menu').hide();函数构建已指定的参数。只需将代码包装在setInterval() 变量中，并让它每100毫秒循环一次。

setInterval()

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

2 个答案: