【发布时间】：2010-03-03 20:43:43
【问题描述】：
我正在使用 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);这应该没关系。
有人可以帮忙吗？要把我的头发拉出来。
提前致谢！
【问题讨论】：
标签： jquery internet-explorer prototypejs conflict superfish