Jquery 在小屏幕上，将水平Superfish菜单变成下拉菜单

我有一个超高速水平菜单，我想变成一个下拉菜单时，窗口加载或调整到小于800像素宽。如果窗口大小调整到800像素以上，我希望该下拉列表返回到水平列表

水平菜单如下所示，通过PHP输出简化如下：

<ul id="menu-primary">
        <li id="menu-item-683">...</li>
        <li id="menu-item-10">
         <a class="sf-with-ul" href="about-us">About Us</a>
         <ul class="sub-menu"> </ul>
        </li>
        ...
</ul>

所以我试着像这样包装菜单：

$("#menu-primary").wrap("<ul id='menu-dropdown' class='sf-menu sf-vertical'><li id='li_drop' class='menu-item'></li></ul>");
$("#menu-primary").before("<span id='nav-dropdown' class='sf-with-ul'>MENU</span>");

$('#menu-primary').attr("id", "menu-primary2");

然后在较小窗口大小的包装器上调用superfish，并使用以下命令从较大窗口大小的包装器中删除superfish类：

    function menudrop(){
if ( $(window).innerWidth() < 800) {
    $("#menu-dropdown").addClass("menu menu-dropdown superfish sf-js-enabled");
    $('#menu-dropdown').superfish({delay:100,animation:{height:'show'},dropShadows: false, speed: 1});
}

else {
    $("#menu-dropdown").removeClass("menu menu-dropdown superfish sf-js-enabled");
}
}

它基本上可以工作，但是如果我以800加载页面，菜单主菜单就不会显示。我尝试过让CSS完全相同，就像我没有添加包装器一样，但它不起作用。似乎我需要撤消$'menu-dropdown'。superfish；不知怎么的，但我不知道怎么做

---

这是可能的，还是有更好的方法来实现这一想法，而无需将菜单转换为。。。菜单？

Superfish必须将jquery事件绑定到菜单，因此即使您将html更改为原来的html，也可能会更改下拉效果，但仍然会有问题。Superfish效果是不可逆的，我认为，但是你可以在下拉菜单上为相同的css定义两种样式，一种是菜单主样式，另一种是菜单主样式，或者其他任何样式，这两种样式应该完全相同。在应用superfish效果之前，请保存旧的菜单html：

var oldmenu = $('#menu-primary').html();
$('#menu-primary').superfish(....

然后在浏览器大小>800上粘贴回旧html：

$('#menu-primary').html(oldmenu);

并应用具有相同样式的其他类，如下所示：

$("#menu-primary").wrap("<ul id='menu-dropdown' class='sf-menu sf-vertical'><li id='li_drop' class='menu-item'></li></ul>");
$("#menu-primary").before("<span id='nav-dropdown' class='sf-with-ul'>MENU</span>");

$('#menu-primary').attr("id", "menu-primary2");

现在superfish效果在这个菜单上不起作用了，样式还是一样的