Question

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

EG; 对于移动设备，低于450px宽度的视口＆gt;正常菜单消失＆gt;并在它的位置出现一个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
    }
}

希望它有所帮助。

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

1 个答案: