用Media Queries觸發一個手風琴菜單？

Question

我想知道是否有可能觸發一個jQuery手風琴菜單，在CSS3媒體查詢中指定的特定視口。

EG;對於移動設備，低於450px寬度的viewport>正常菜單消失>，並且在它的位置出現一個jQuery手風琴菜單。

我怎麼能做到這一點？有沒有一種方法可以將視口條件設置爲可用於IE的條件，這可以隱藏該菜單，並拉入新的jQuery手風琴？

Answer 1

如果我正確理解你的問題，你可以簡單地把菜單和兩個單獨的div手風琴，和他們display CSS屬性更改爲block或none根據視口的寬度，這樣的：

@media only screen and (max-width : 450px) { 
    .accordion { display: block; } 
    .normalmenu { display: none; } 
} 
@media only screen and (min-width : 450px) { 
    .accordion { display: none; } 
    .normalmenu { display: block; } 
} 

如果您的手風琴和菜單具有相同的HTML結構，您可以偵聽窗口大小調整事件並加載手風琴;當然，你也應該檢查它的初始負載：

$(window).resize(function() { 
    checkWidthAndLoadAccordion(); 
}); 

$(document).ready(function() { 
    checkWidthAndLoadAccordion(); 
}); 

function checkWidthAndLoadAccordion() { 
    if($(window).width() < 450) { 
     // load your accordion 
    } 
} 

希望它有幫助。