미디어 쿼리로 accordian 메뉴를 트리거 하시겠습니까?

Question

CSS3 Media Queries에 명시된 특정 뷰포트에서 jQuery 아코디언 메뉴를 트리거 할 수 있는지 궁금합니다.

EG; 모바일 장치의 경우, 너비가 450px 미만인 뷰포트> 일반 메뉴가 사라지고 jQuery 아코디언 메뉴가 나타납니다.

어떻게해야합니까? IE 용 뷰포트 용 조건부를 설정할 수있는 방법이 있습니까?이 메뉴를 숨기고 새 jQuery 아코디언을 가져올 수 있습니까? 내가 제대로 질문을 이해한다면

Answer 1

, 당신은 단순히 메뉴와 두 개의 분리 된 div에서 아코디언을 가질 수와 같이, 뷰포트의 폭에 따라 하나 block 또는 none 자신의 display CSS 속성을 변경 :

@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 
    } 
} 

희망이 있습니다.