Question

我有一个启用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像素加载页面并调整大小为＆gt; 800，则#menu-primary不会显示。我已经尝试使CSS完全相同，如果我没有添加包装器，但它不起作用。似乎我需要以某种方式撤消$('#menu-dropdown').superfish();，但我不知道该怎么做。

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

Answer 1

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

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

然后在浏览器尺寸＆gt; 800粘贴旧的HTML：

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

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

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

现在超级鱼效果在这个菜单上不起作用，样式仍然相同。

将水平Superfish菜单转换为小屏幕上的下拉列表

1 个答案: