将水平 Superfish 菜单变成小屏幕上的下拉菜单答案

【问题标题】：Turn horizontal Superfish menu into dropdown on small screens将水平 Superfish 菜单变成小屏幕上的下拉菜单
【发布时间】：2013-03-02 01:00:03
【问题描述】：

我有一个启用 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>");

然后在包装器上调用 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，#menu-primary 不会显示。我已经尝试使 CSS 与我没有添加包装器完全相同，但它不起作用。看来我需要以某种方式撤消$('#menu-dropdown').superfish();，但我不知道该怎么做。

这可能吗，还是有更好的方法来实现这个想法（无需将菜单转换为<select><option>... 菜单）？

【问题讨论】：

标签： jquery superfish

【解决方案1】：

Superfish 必须有一个 jquery 事件绑定到菜单，所以即使你将 html 更改为旧的，它可能会改变下拉效果，但它仍然是错误的。 Superfish 效果是不可逆的（我认为），但您可以在下拉菜单中为同一个 css 定义 2 种样式，您已经拥有的一种是 #menu-primary，另一种是 #menu-primary2（或其他任何东西），这两种风格应该是完全一样的。在应用 superfish 效果之前，保存旧菜单 html：

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

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

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

并像这样应用另一个类（具有相同的样式）：

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

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

【讨论】：