使用媒体查询触发手风琴菜单？

Question

我想知道是否可以在 CSS3 媒体查询中规定的特定视口触发 jQuery 手风琴菜单。

EG; 对于移动设备，低于 450 像素宽度的视口 > 普通菜单消失 > 并且 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
    }
}

希望对你有帮助。