我有一个从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请求之前,两个菜单均正确显示。 Menu 1如下所示。Menu 2如下所示(与菜单1相同)。
菜单1负责发送Ajax请求,该事件在单击
Menu 1
项时发生(在这种情况下不执行任何操作。此Ajax请求发送到的页面在这种情况下完全留空。这只是一个演示) 。在这两种情况下,当鼠标指针悬停在
Menu Item 1
上时,它将打开一个包含Child Item 1
..... Child Item 5
的子菜单。发出Ajax请求后,如果我将鼠标悬停在
Menu Item 1
的Menu 2
上,它将无法正常工作,并且looks如下所示。选择
Menu Item 1
上的Menu 2
时,该父菜单的最后一个子菜单(Menu Item 1
)会立即出现。为什么会这样?在页面加载时,用于弹出菜单的js代码如以下导入的代码中所述。
<script type="text/javascript" language="javascript" src="category_parent_css_js/cat_parent_js.js"></script>
这与代码段中提到的js代码完全相同。发出Ajax请求后,此代码段中的js代码用于弹出菜单。
如果需要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}
最佳答案
我看了看您的HTML,Javascript和CSS代码。我更正了IDE突出显示的所有错误,并将所有代码简化为1个单个文件以进行测试。我创建了一个ajax方法来仅返回您要替换的菜单的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>
<style type="text/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;
}
</style>
<script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
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_new.animateduration.over);
},
function (e) {
var $targetul = $(this).children("ul:eq(0)");
$targetul.slideUp(jqueryslidemenu_new.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: "/Home/Test2",
data: "ed_id=" + parentId + "&t=" + new Date().getTime(),
success: function (response) {
$('#myslidemenu').replaceWith(response);
jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
//This calls the above function to pop up the menu.
},
error: function (e) {
alert('Error: ' + e);
}
});
}
$(function () {
jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
jqueryslidemenu_new.buildmenu_new("myslidemenu2", arrowimages_new);
});
</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: pointer; 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>
</li>
</ul>
</div>
</div>
</td>
</tr>
</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_menu2">
<div id="myslidemenu2" class="jqueryslidemenu">
<ul>
<li>
<div style='width: auto; cursor: pointer; 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>
</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
我相信解决此问题的最重要方法是删除双ID(这会混淆您的JavaScript选择),并确保所有HTML标记均已关闭(这使浏览器很难理解要构建的内容)。同样,也无需双重加载脚本。一旦在页面上,您就可以重复使用它。
如果您有任何问题,请通知我。
编辑
为了完整起见,我将您看到的AJAX调用返回的HTML添加到“ / Home / Test2”中:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>
<div style='width: auto; cursor: pointer; 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>
</li>
</ul>
</div>
关于javascript - 当其中一个菜单使用Ajax调用时,页面上的其余菜单未正确加载,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12679062/