js 三级列表问题...

<table width="233" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
     <table width="233" height="36" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url(images/bg_18.jpg);cursor: hand; cursor:pointer;" onclick="fun(t1)">
   <tr>
     <td width="44" align="left" valign="middle"> </td>
     <td width="189" align="left" valign="middle" class="zi01">出口产品</td>
   </tr>
</table>
<table width="200" height="30" border="0" align="center" cellpadding="0" cellspacing="0" id="t1" style="display: none">
   <tr>
     <td width="32" align="center" valign="middle"><img src="images/list_01.gif" width="6" height="10" /></td>
     <td width="168" align="left" valign="middle" style="cursor: hand; cursor:pointer;" onclick="fun(t2)"><span style="cursor: hand; cursor:pointer;">出口产品分类1</span></td>
   </tr>
</table>
<table width="200" height="20" border="0" align="center" cellpadding="0" cellspacing="0" id="t2" style="display:none">
   <tr>
     <td width="40"> </td>
     <td width="160" align="left" valign="middle" class="zi07">进口产品分类</td>
   </tr>
</table><script language="javascript" type="text/javascript">
function fun(t)
{
    try
    {
        if(t.style.display=='none')
        {
            t.style.display="";
}
        else
        {
            t.style.display="none";
        }
    }
    catch(exception){}
}
</script>

    </td>
  </tr>
</table>这段代码是一个js三级列表...点击一级"出口产品"时显示...二级"出口产品分类1"...再点击二级"出口产品分类1"时显示...三级"进口产品分类",再当我点击一级"出口产品"时...二级和三级列表就自动隐藏...问题是当三级列表全部显示时，我再点击一级时，只有二级隐藏了而三级还是显示的....求大家帮忙解决下

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>无标题文档</title>
<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
</head><body>
<table width="233" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td>
  <table width="233" height="36" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url(images/bg_18.jpg);cursor: hand; cursor:pointer;" onclick="fun(t1)">
  <tr>
  <td width="44" align="left" valign="middle"> </td>
  <td width="189" align="left" valign="middle" class="zi01">出口产品</td>
  </tr>
</table>
<table width="200" height="30" border="0" align="center" cellpadding="0" cellspacing="0" id="t1" style="display: none">
  <tr>
  <td width="32" align="center" valign="middle"><img src="images/list_01.gif" width="6" height="10" /></td>
  <td width="168" align="left" valign="middle" style="cursor: hand; cursor:pointer;" onclick="fun(t2)"><span style="cursor: hand; cursor:pointer;">出口产品分类1</span></td>
  </tr>
</table>
<table width="200" height="20" border="0" align="center" cellpadding="0" cellspacing="0" id="t2" style="display:none">
  <tr>
  <td width="40"> </td>
  <td width="160" align="left" valign="middle" class="zi07">进口产品分类</td>
  </tr>
</table><script language="javascript" type="text/javascript">
function fun(t)
{
  try
  {
  if(t.style.display=='none')
  {
  t.style.display="";
}
  else
  {
  t.style.display="none";
  document.getElementById('t2').style.display = 'none'
  }



  }
  catch(exception){}
}</script>  </td>
  </tr>
</table>
</body>
</html>
你得让代码有包含关系！我给你修改就可以了...你试试页面再调整一下！<table width="233" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="233" height="36" border="1" align="center" cellpadding="0" cellspacing="0" style="background: url(images/bg_18.jpg); cursor: hand; cursor: pointer;" onclick="fun(t1)">
<tr>
<td width="44" align="left" valign="middle">
 
</td>
<td width="189" align="left" valign="middle" class="zi01">
出口产品
</td>
</tr>
</table>
<table width="200" height="30" border="1" align="center" cellpadding="0" cellspacing="0" id="t1" style="display: none">
<tr>
<td width="168" align="left" valign="middle" style="cursor: hand; cursor: pointer;" onclick="fun(t2)">
<span style="cursor: hand; cursor: pointer;">   出口产品分类1</span>
</td>
</tr>
<tr>
<td width="32" align="center" valign="middle">
<table width="200" height="20" border="1" align="center" cellpadding="0" cellspacing="0" id="t2" style="display: none">
<tr>
<td width="40">
 
</td>
<td width="160" align="left" valign="middle" class="zi07">
   进口产品分类
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
有层级关系，就应该有层级div  实现table的隐藏显示
你那个fun 的方法显然是不够用的，他不可能知道  谁是他的子节点。因此还要加逻辑判断等等。
建议你写两个function 分别显示，隐藏。多次调用比如
<table width="233" height="36" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url(images/bg_18.jpg);cursor: hand; cursor:pointer;" onclick="hide(t1);hide(t2);...">
<script language="javascript" type="text/javascript">

                        function show(t)
                        {
                          t.style.display="block";
                        }
                        function hide(t)
                        {
                            t.style.display="none";
                        }
                    </script>
onclick="hide(t1);hide(t2);..."
<script language="javascript" type="text/javascript">
function fun(t)
{
  try
  {
   if(t.style.display=='none') {
   t.style.display="";
}else
   {
   t.style.display="none";
   if(t==t1){//在隐藏的时候，如果是转入t1,则把t2也隐藏掉
      fun(t2);
   }
   }
  }
  catch(exception){}
}
</script>
给你加了点，有说明。