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

问题描述：

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

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/

您是否尝试过使用@media CSS功能？ –

是的，我对不同的分辨率有不同的CSS样式表。但是Java脚本会使它们在点击时展开和折叠。 – user3174196

我想你应该检查一下resize事件，我已经在下面发布了一个答案和更多详细信息 –

答

您可以通过使用调整窗口大小时触发的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这* question在这里有更多的细节

答

你可以建立在你已经通过使用JavaScript setInterval()函数指定的参数。只需将代码包装在setInterval()变量中，并使其每100毫秒循环一次。

var widthDetect= setInterval(function(){  
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 
} 
}, 100);

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

相关推荐