Javascript 触发带有媒体查询的手风琴菜单？

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

EG对于移动设备，在450px宽度的视口下方>正常菜单消失>，并在其所在位置显示jQuery手风琴菜单

---

我怎样才能做到这一点？有没有一种方法可以将视口的条件设置为IE可行的，可以隐藏该菜单，并拉入我的新jQuery手风琴一号？

如果我正确理解您的问题，您只需将菜单和手风琴放在两个单独的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
    }
}

$（窗口）。调整大小（函数（）{
checkWidthAndLoadAccordion（）；
});
$（文档）.ready（函数（）{
checkWidthAndLoadAccordion（）；
});
函数checkWidthAndLoadAccordion（）{
如果（$（窗口）.width（）<450）{
//装上手风琴
}
}

希望能有帮助