1

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

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

4

1 回答 1

0

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");

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

于 2013-03-01T17:00:03.287 回答