在小屏幕上摺疊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事件來實現此目的。 只需添加偵聽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 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);