0

我正在使用 jQuery 的 Superfish 菜单插件在某些页面上显示垂直菜单。我还使用 Supersubs.js 插件来确保菜单系统中的每个级别都与最宽的 LI 元素一样宽。

我已经获取了下载 zip 文件中包含的EXAMPLE.HTML 文件，并且只是将prototype.js 库添加到了源代码中。

正如预期的那样，FF、Chrome、Safari 都正确地渲染了菜单并使用 supersubs 插件来确保菜单的每一级至少与最宽的元素一样宽。

然后是IE……

一旦你在页面上包含 Prototype.js 库，IE 就会忽略 Supersubs 插件。

这是 example.html 源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>A very basic Superfish menu example</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" media="screen" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
    <script type="text/javascript" src="js/hoverIntent.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/supersubs.js"></script>
    <script type="text/javascript">

       //jQuery.noConflict();

    // initialise plugins
        jQuery(function() {
            jQuery('ul.sf-menu').supersubs({
                minWidth: 12,
                maxWidth: 30,
                extraWidth: 2
            }).superfish();
        });

    </script>
</head>
<body>
    <ul class="sf-menu sf-vertical">
        <li class="current">
            <a href="#a">menu item</a>
            <ul>
                <li>
                    <a href="#aa">menu item that is quite long</a>
                </li>
                <li class="current">
                    <a href="#ab">menu item</a>
                    <ul>
                        <li class="current"><a href="#">menu item</a></li>
                        <li><a href="#aba">menu item</a></li>
                        <li><a href="#abb">menu item</a></li>
                        <li><a href="#abc">menu item</a></li>
                        <li><a href="#abd">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">menu item</a>
        </li>
        <li>
            <a href="#">menu item</a>
            <ul>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">short</a></li>
                        <li><a href="#">short</a></li>
                        <li><a href="#">short</a></li>
                        <li><a href="#">short</a></li>
                        <li><a href="#">short</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">menu item</a>
        </li>   
    </ul>

</body>
</html>

我试过 jQuery.noConflict()。我已将插件文件中的源代码更改为使用 jQuery 而不是 $，即使它们使用 (function($) {})(jQuery); 那应该没关系。

有人能帮忙吗？想把我的头发拉出来。

提前致谢！

4

1 回答 1

0

在插件中查找变量名与类名或 id 相同的实例，例如

menu = $('#menu');

而是做一个

var menu = $('#menu');

这是在黑暗中拍摄的，但每当我只有 IE 的错误时，我会在使用 Prototype.js 时寻找这个。

于 2010-03-03T23:49:05.310 回答