我有一个从 MySql 数据库填充的动态菜单。当单击此菜单上的其中一项时，将发出 Ajax 请求，并相应地根据传递给 Ajax 请求的 id 突出显示树结构（产品类别及其各自的子类别）。
菜单的维护很简单<ul><li></li></ul>，当鼠标按钮悬停在菜单上的某个项目上时，会调用一些 jQuery 函数来弹出（下拉）子项目。进展顺利。
由于某些原因，需要在同一页面上显示相同类型的菜单（其中只有一个菜单使用 Ajax。其余的不需要使用 Ajax）。
问题是我必须加载 jQuery 函数才能分别弹出菜单项。在页面加载和 Ajax 请求上一次。否则，它不会弹出菜单。因此，在我看来，浏览器上激活了两个 JavaScript，它们阻止了同一页面上的其余菜单正确显示。
需要注意的是，当鼠标按钮悬停时。如果没有发出 Ajax 请求（通过上面提到的唯一使用 Ajax 调用的菜单），所有菜单都会正确显示。
我希望你能明白我的意思。很抱歉，我不能让我的问题比这更明确。为什么会这样？有针对这个的解决方法吗。
编辑：
我有这个用于弹出菜单的 jQuery 代码。
var arrowimages_new={down:['downarrowclass', 'category_parent_css_js/images/down.gif', 3], right:['rightarrowclass', 'category_parent_css_js/images/right.gif']}
var jqueryslidemenu_new={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu_new:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', zIndex:'99999'})
$mainmenu.find("ul li").css({zIndex:'99999'})
}) //end document.ready
}
}
<script></script>已经使用加载页面时使用的标记的 src 属性导入了相同的 jQuery 。
这是使用 Ajax 调用的函数。
function getParentId(parentId)
{
$.ajax({
datatype:"html",
type: "GET",
url: "ajax/ParentId.php",
data: "ed_id=" + parentId+"&t="+new Date().getTime(),
success: function(response)
{
$('#originalMenu').html(response);
jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
// The above function is called from here.
},
error: function(e)
{
alert('Error: ' + e);
}
});
document.getElementById("txt_parent").value=parentId;
}
编辑：
以下是包含js的完整HTML代码（只是为了演示）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Menu</title>
<link rel="stylesheet" type="text/css" href="category_parent_css_js/cat_parent.css" />
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="category_parent_css_js/cat_parent_js.js"></script>
<script type="text/javascript" language="javascript">
//This code is used to pop up menu after an Ajax request is made.
//On page load, exactly the same code which is an external js in on of preceding script tags is used.
var arrowimages_new={down:['downarrowclass', 'category_parent_css_js/images/down.gif', 3], right:['rightarrowclass', 'category_parent_css_js/images/right.gif']}
var jqueryslidemenu_new={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu_new:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', zIndex:'99999'})
$mainmenu.find("ul li").css({zIndex:'99999'})
}) //end document.ready
}
}
//This function just sends an Ajax request.
function getParentId(parentId)
{
$.ajax({
datatype:"html",
type: "GET",
url: "ajax/ParentId.php",
data: "ed_id=" + parentId+"&t="+new Date().getTime(),
success: function(response)
{
$('#originalMenu').html(response);
jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
//This calls the above function to pop up the menu.
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
</script>
</head>
<body>
<form action="" id="dataForm" name="dataForm" method="post">
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" class="menu"><div id="header_top_menu">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>
<div style='width:auto;cursor:hand;text-align:left; background-color:white; border:none; color:black; font-size:small;'>Menu 1</div>
<ul>
<li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
<ul>
<li><a href="#" onclick="getParentId(21); return false;">Child Item 1</a></li>
<li><a href="#" onclick="getParentId(20); return false;">Child Item 2</a></li>
<li><a href="#" onclick="getParentId(20); return false;">Child Item 3</a></li>
<li><a href="#" onclick="getParentId(20); return false;">Child Item 4</a></li>
<li><a href="#" onclick="getParentId(20); return false;">Child Item 5</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div></td>
</table>
<br/><br/><br/><br/><br/>
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" class="menu"><div id="header_top_menu">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>
<div style='width:auto;cursor:hand;text-align:left; background-color:white; border:none; color:black; font-size:small;'>Menu 2</div>
<ul>
<li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
<ul>
<li><a href="#">Child Item 1</a></li>
<li><a href="#">Child Item 2</a></li>
<li><a href="#">Child Item 3</a></li>
<li><a href="#">Child Item 4</a></li>
<li><a href="#">Child Item 5</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div></td>
</table>
</form>
</body>
</html>
此 HTML 显示两个菜单，Menu 1和Menu 2. 当一个项目Menu 1被点击时，一个 Ajax 请求被发送到一个在这个演示中什么都不做的 URL。在发出 Ajax 请求之前，这两个菜单都会正确显示。菜单 1如下所示。
菜单 2如下所示（与菜单 1 相同）。
菜单 1负责发送一个 Ajax 请求，该请求在单击一个项目时发生Menu 1（在这种情况下，它什么也不做。在这种情况下，这个 Ajax 请求发送到的页面完全留空。这只是一个演示）。
在这两种情况下，当鼠标指针悬停在 上时Menu Item 1，它会打开一个子菜单，其中包含Child Item 1......Child Item 5
发出 Ajax 请求后，如果我将鼠标悬停在Menu Item 1of上Menu 2，它将无法正常运行，并且看起来如下所示。
选择Menu Item 1打开时，该父菜单( )的最后一个子菜单会立即出现。为什么会这样？Menu 2Menu Item 1
在页面加载时用于弹出菜单的 js 代码如下导入代码中所述。
<script type="text/javascript" language="javascript" src="category_parent_css_js/cat_parent_js.js"></script>
这与代码片段中提到的js代码完全相同。此片段中的 js 代码用于在发出 Ajax 请求后弹出菜单。
如果您需要 CSS，如下所示，由以下标签链接。
<link rel="stylesheet" type="text/css" href="category_parent_css_js/cat_parent.css" />
.jqueryslidemenu{font:bold 9px Tahoma, Verdana, sans-serif;color:#fff;width: 100%;text-align:left;z-index:99999}
.jqueryslidemenu ul{margin: 0;padding: 0px;list-style-type: none;z-index:99999}
.jqueryslidemenu ul li{position: relative;display: inline;float: left;z-index:auto}
.jqueryslidemenu ul li a{font:bold 12px Tahoma, Verdana, sans-serif;display: block;background:#000;color: #fff;padding: 3px 3px;text-decoration: none;z-index:99999}
* html .jqueryslidemenu ul li a{display: inline-block;z-index:99999}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color: #fff;text-decoration: none;z-index:99999}
.jqueryslidemenu ul li a:hover{background:#000;text-decoration:none;color: #03C;z-index:99999}
.jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;z-index:99999}
.jqueryslidemenu ul li ul li{display: list-item;float: none;z-index:99999}
.jqueryslidemenu ul li ul li ul{top:0;z-index:99999}
.jqueryslidemenu ul li ul li a{font:bold 9px Tahoma, Verdana, Geneva, sans-serif;width: 140px;margin: 0;padding: 6px;border-top-width: 0;border-bottom: 1px solid gray;z-index:99999}
.jqueryslidemenuz ul li ul li a:hover{color:#fff; background:#000;z-index:99999}
.downarrowclass{position: absolute;top: 8px;right: 7px;display:none;z-index:99999}
.rightarrowclass{position: absolute;top: 6px;right: 5px;z-index:99999}