Запустить аккордеонное меню с помощью Media Queries?

Question

Мне интересно, можно ли было бы вызвать аккордеонное меню jQuery в конкретном окне просмотра, указанном в CSS3 Media Queries.

EG; Для мобильных устройств с областью просмотра шириной менее 450 пикселей> нормальное меню исчезает> и на его месте появляется аккордеонное меню jQuery.

Как я мог это сделать?Есть ли способ, которым я мог бы установить условные обозначения для окон просмотра как выполнимые для IE, которые могли бы скрыть это меню и вставить мой новый аккордеонный jQuery?

Answer 1

Если я правильно понимаю ваш вопрос, вы можете просто разместить меню и аккордеон на двух отдельных элементах div и изменить их свойство CSS display на 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
    }
}

Надеюсь, это поможет.