拆叠菜单兼营性问题

topzhp

已于 2023-03-29 11:50:34 修改

阅读量46

点赞数

文章标签： javascript 前端 html

于 2023-03-28 14:41:49 首次发布

本文链接：https://blog.csdn.net/topzhp/article/details/129815703

版权

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT language=javascript>
var itemp;
var tobj="";
itemp="";
function leftBgOver(obj){//菜单
	obj.style.background="url(images/left_bg02.gif) center no-repeat";
	//obj.style.position="center";
	//obj.style.repeat="no-repeat":
}

function leftBgOut(obj,sty){
	//alert( (sty)?"url(" + sty + ")":"");
if (tobj!="")
{
sty="images/left_bg01.gif";
obj.style.background= (sty)?"url(" + sty + ")":"";
}
else 
{
obj.style.background= (sty)?"url(" + sty + ")":"";
}
}
</script>
<script language="javascript">
function collapse(obj_td,objid)
{
	var obj = document.getElementById(objid);
	collapseAll(obj_td);
	obj.style.display = 'block';
}
function collapseAll(obj_td)
{
	for (var i=1; i<6; i++)
	{
		var obj = document.getElementById('g_' + i.toString());
		if (obj) obj.style.display = 'none';
	}
	var imgs=document.getElementsByTagName("IMG")
	for(i=0;i<imgs.length;i++)
	{
		if (imgs[i].id=='jj')
		{
			imgs[i].src="images/ja.gif"
		}
	}
	if(obj_td)obj_td.all[0].src="images/jan.gif"
	//alert(obj_td.all[0].innerHTML)
}
function expandAll()
{
	for (var i=1; i<6; i++)
	{
		var obj = document.getElementById('g_' + i.toString());
		if (obj) obj.style.display = '';
	}
}

function td_bg()
{
	var tds=document.getElementsByTagName("TD")
	for(var i=0 ;i<tds.length;i++)
	{
		if (tds[i].background.indexOf("images/left_bg02.gif")>-1)
		{
			tds[i].background="images/left_bg01.gif"
		}
	}
	var obj=event.srcElement;
	while(!(obj.background && obj.background.indexOf("images/left_bg")>-1))
	{
		obj=obj.parentElement;
		if(obj.tagName=="BODY")
		{
			return;
		}
	}
	obj.background="images/left_bg02.gif"
}
</script>
<link href="style/style.css" rel="stylesheet" type="text/css">
<style rel="stylesheet" type="text/css">
body {margin:0px 5px;}
img{border:none;}
.menuall{text-align:center;width:149px;background:#ffffff;}
.menuall div{margin:0px 0 5px 10px;text-align:left;}
</style>
</head>
<body>
<SCRIPT language=JavaScript>
				nereidFadeObjects = new Object();
				nereidFadeTimers = new Object();
				function nereidFade(object, destOp, rate, delta){
				if (!document.all)
				return
					if (object != "[object]"){ 
						setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
						return;
					}
					clearTimeout(nereidFadeTimers[object.sourceIndex]);
					diff = destOp-object.filters.alpha.opacity;
					direction = 1;
					if (object.filters.alpha.opacity > destOp){
						direction = -1;
					}
					delta=Math.min(direction*diff,delta);
					object.filters.alpha.opacity+=direction*delta;
					if (object.filters.alpha.opacity != destOp){
						nereidFadeObjects[object.sourceIndex]=object;
						nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
					}
				}
				</SCRIPT>
<table border="0" cellpadding="0" cellspacing="0" class="menuall" onClick="td_bg()">
<tr>
<td><img src="images/left_top.gif" alt="" /></td>
</tr>
<tr>
<td>
<a href="javascript:expandAll()" target="_self"><img src="images/extand.gif" alt="展开菜单" onMouseOver=nereidFade(this,100,10,4) style="FILTER:alpha(opacity=50)" onMouseOut=nereidFade(this,50,10,4) /></a>&nbsp;<a href="javascript:collapseAll()" target="_self"><img src="images/collapse.gif" alt="收拢菜单" onMouseOver=nereidFade(this,100,10,4) style="FILTER:alpha(opacity=50)" onMouseOut=nereidFade(this,50,10,4) /></a></td>
</tr>
<tr>
<td id="td_1" height="25" align="left" style="cursor:hand;" onClick="collapse(this,'g_1')"><img src="images/ja.gif" id=jj  width="15" height="15" align="absmiddle"><img src="images/tong_01.gif" width="16" height="16" align="absmiddle"><strong> 货单管理</strong></td>
</tr>
<tr>
<td id="g_1"><table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tbody>
    <tr>
      <td height="30" align="center" background="images/left_bg01.gif" style="cursor:hand"  onclick="javascript:parent.right.location.href='pd/pd_sell.asp';"><table cellpadding="0" cellspacing="0" width="100%"><tr><td width="50">&nbsp;</td><td>添加货单</td></tr></table></td>
    </tr>
    <tr>
      <td height="30" align="center" background="images/left_bg01.gif" style="cursor:hand"  onclick="javascript:parent.right.location.href='pd/sell.asp';"><table cellpadding="0" cellspacing="0" width="100%"><tr><td width="50">&nbsp;</td>
        <td>货单管理</td></tr></table></td>
    </tr>
  </tbody>
</table></td>
</tr>

<tr>
<td height="25" align="left" style="cursor:hand;" onClick="collapse(this,'g_2')"><img src="images/ja.gif" id=jj  width="15" height="15" align="absmiddle"><img src="images/tong_01.gif" width="16" height="16" align="absmiddle"><strong> 产品管理</strong></td>
</tr>
<tr>
<td id="g_2"><table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tbody>
    
    <tr>
      <td height="30" align="center" background="images/left_bg01.gif" style="cursor:hand"  onclick="javascript:parent.right.location.href='pd/pd_add.asp';"><table cellpadding="0" cellspacing="0" width="100%"><tr><td width="50">&nbsp;</td><td>添加产品</td></tr></table></td>
    </tr>
    <tr>
      <td height="30" align="center" background="images/left_bg01.gif" style="cursor:hand"  onclick="javascript:parent.right.location.href='pd/pd.asp';"><table cellpadding="0" cellspacing="0" width="100%"><tr><td width="50">&nbsp;</td><td>产品管理</td></tr></table></td>
    </tr>
    <tr>
      <td height="30" align="center" background="images/left_bg01.gif" style="cursor:hand"  onclick="javascript:parent.right.location.href='st/bigclass.asp';"><table cellpadding="0" cellspacing="0" width="100%"><tr><td width="50">&nbsp;</td><td>产品大类管理</td></tr></table></td>
    </tr>
    <tr>
      <td height="30" align="center" background="images/left_bg01.gif" style="cursor:hand"  onclick="javascript:parent.right.location.href='st/smallclass.asp';"><table cellpadding="0" cellspacing="0" width="100%"><tr><td width="50">&nbsp;</td><td>产品小类管理</td></tr></table></td>
    </tr>
		
	<tr><td height="5"></td></tr>
  </tbody>
</table></td>
</tr>


<tr>
<td id="g_7"><table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
</table></td>
</tr>
<tr>
<td><img src="images/left_bottom.gif" alt="" /></td>
</tr>
</table>
<div style="font-size:11px;font-family:Tahoma; color:#CEE6FA" align="center">Powered </div>
<script>
collapse(td_1,'g_1')
</script>
</body></html>

标红的两行代码  在IE6下没问题，在现在的win7的 IE11  360 Firefox等浏缆器上会报错如下，请问各位大老要如何解决，谢谢！！！
50行代码：if(obj_td)obj_td.all[0].src="images/jan.gif"
menu.asp:50 Uncaught TypeError: Cannot read property '0' of undefined
    at collapseAll (menu.asp:50)
    at collapse (menu.asp:32)
    at menu.asp:238

67行代码：if (tds[i].background.indexOf("images/left_bg02.gif")>-1)
menu.asp:67 Uncaught TypeError: Cannot read property 'indexOf' of undefined
at td_bg (menu.asp:67)
at HTMLTableElement.onclick (menu.asp:117)

经过本站“文盲老顾”老大的远程协助处理：

50行代码修改为 obj_td.querySelector('img').src="images/jan.gif"

第二处错误function td_bg()

修改为如下代码：可支持现代新浏缆器了。

function td_bg()
{
    document.querySelectorAll('.menuall table  td[onclick]').forEach(td => {td.style.background = 'url(images/left_bg01.gif)'})
    var obj=event.srcElement;
    while (!obj.click || obj.nodeName.toLowerCase()!='td' || !obj.style.background){
        obj = obj.parentNode
        console.log(obj)
    }
    obj.style.background="url(images/left_bg02.gif)"
}