1

我正在尝试使用Superfish jQuery 插件来增强网站上的下拉菜单。但是，当光标在 Firefox 浏览器 (v. 21.0) 中悬停在下拉菜单上时，它不会打开。在 Chrome 和 Opera 中它可以工作。如果没有 Superfish 插件，下拉菜单也可以在带有纯 CSS 的 Firefox 中使用。

使用cssArrowsSuperfish 选项时，箭头不会显示在任何浏览器中（即使使用更多填充）。我不知道这个问题是否与第一个有关。

这是我的标记：

<nav>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li>
            <a href="#">Page 2</a>
            <ul>
                <li><a href="#">Page 2.1</a></li>
                <li><a href="#">Page 2.2</a></li>
                <li><a href="#">Page 2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
</nav>

这是我的 CSS/SASS：

 nav {
    width: 100%;
    float: left;

    ul {
        display: block;
        float: left;
        width: 100%;

        li {
            position: relative;
            display: block;
            float: left;

            a {
                display: block;
                padding: 14px 14px;
            }
            /* drop-down */
            ul {
                display: none;
                position: absolute;
                left: 0;
                top: 100%;
                padding: 0;
                border: 1px solid #aaa;
                border-top-width: 0;

                li {
                    float: none;
                    a {
                        padding: 8px 3px;
                        border-top: 1px solid #aaa;
                    }
                }
            }

            &:hover,
            &.sfHover {
                ul {
                    display: block;
                }
            }
        }
    }
}

这是我的 Superfish 电话：

$('nav').superfish();

在 Firefox 中，当我将鼠标悬停在li包含二级菜单的标签上时，li没有得到应有的sfHover类。相反，顶层ul获得sfHover分配给它的类。然后，当我在该标签上按下鼠标左键时li，它会获得“sfHover”标签并显示下拉菜单。在 Chrome 和 Opera中，sfHover类被分配给正确的元素。

Superfish 插件网站的示例也适用于我的 Firefox 浏览器，但它们并没有帮助我解决这个问题。我的菜单 html 标记与这些示例中的几乎相同。

我试过

  • 将 z-indexes 分配给不同的元素，但它没有帮助（没想到）。目前，页面上没有任何元素分配给它的 z-index。
  • li为和元素分配宽度，a因为我读到它在某些问题情况下有所帮助。
  • 使用 Superfish 示例中的样式表，但它们并没有更好地工作。
  • margin-left: -9999px用代替 隐藏下拉菜单，display: none但这没有帮助。
  • 初始化 Superfish 时使用所有选项
  • 使用标签而position: relative不是标签ali

我还检查了我的 html 是否有效。

谁能弄清楚是什么问题？我将不胜感激任何建议。

4

2 回答 2

1

好的，问题不在于 jQuery 版本。我想我只是暂时错误地认为它有效。

我在项目中使用 wordpress 3.5.2，它与 superfish 冲突。我现在没有时间仔细研究它，但我发现了这么多：

wp-includes/js/admin-bar.min.js 使用 hoverIntent 函数，如果在执行该脚本时 jQuery 已经包含但hoverIntent未定义，它会定义函数jQuery.fn.hoverIntent本身。

hoverIntent jQuery 插件可以选择与 superfish 一起使用。superfish 调用hoverIntent该插件的函数一次，如果它已定义。此调用导致我的下拉菜单不显示，因为当我将光标悬停在包含子菜单的列表项上时它导致错误（admin-bar.min.js 中的“b.browser 未定义”）。

它只出现在 Firefox 中的原因是我只在 Firefox 中登录到这个 wordpress 站点，而不是在其他浏览器中......

但是：disableHI在超级鱼中有一个选择。如果您将其设置为true，superfish 将不会调用 hoverIntent。我以为我已经尝试过该选项，但无论如何，它当然有效。

于 2013-07-02T17:05:41.437 回答
1

我无法在 Firefox 21 中测试它，因为我的 Firefox 刚刚更新到 22。

但是在 22 中它按预期工作，这是我测试的地方：http: //jsbin.com/okafoz/1/edit

这可能是与 Superfish 无关的问题。

于 2013-07-02T14:07:20.273 回答