请教一个菜单效果问题


<script >
var i = 10;
function divClick(tb){
var n = event.srcElement.parentNode.rowIndex;
if(n%2==0){
with(tb.rows[n+1].style) display = display=="none" ? "block" : "none";
}}</script><body >
<TABLE onclick="divClick(this)">
<TR>
<TD>1:科学 </TD>
</TR>
<TR>
<TD> 科学介绍XXXXXXX 
          XXXXXXXX... </TD>
</TR>
<TR>
<TD> 2：化学 </TD>
</TR>
<TR>
<TD> 化学介绍XXXXXX 
          XXXXXXXX.... </TD>
</TR>
<TR>
<TD> 3.体育 
 </TD>
</TR>
<TR>
<TD> 体育介绍XXXXXX 
          XXXXXXXX....  </TD>
</TR></TABLE></body>

解决方案 »

  1.   


    <script >
    var i = 10;
    function divClick(tb){
    var n = event.srcElement.parentNode.rowIndex;
    var orow = tb.rows.length;
    if(n%2==0){
    for(var i =0;i<orow;i++){ if(i!=n && (i%2==0)){
    tb.rows[i+1].style.display = "none";
    }
    } with(tb.rows[n+1].style) display = display=="none" ? "block" : "none";}}</script><body >
    <TABLE onclick="divClick(this)">
    <TR >
    <TD>1:科学 </TD>
    </TR>
    <TR >
    <TD> 科学介绍XXXXXXX 
              XXXXXXXX... </TD>
    </TR>
    <TR>
    <TD> 2：化学 </TD>
    </TR>
    <TR>
    <TD> 化学介绍XXXXXX 
              XXXXXXXX.... </TD>
    </TR>
    <TR>
    <TD> 3.体育 
     </TD>
    </TR>
    <TR>
    <TD> 体育介绍XXXXXX 
              XXXXXXXX....  </TD>
    </TR></TABLE></body>
      

  2.   

    非常感谢 s_liangchao1s 兄 但还有一点问题
    if(n%2==0){
        for(var i =0;i<orow;i++){            if(i!=n && (i%2==0)){    
                tb.rows[i+1].style.display = "none";
                }
            }            with(tb.rows[n+1].style) display = display=="none" ? "block" : "none";}}
    这里是控制第一次点击时让所有打开的东西全部关闭吧？而最后那句
    with(tb.rows[n+1].style) display = display=="none" ? "block" : "none";
    是控制在次展开 确保每次都是点击一个收起其他。可第一次在全开的状态下运行时会全部收起。是不是没执行到最后那句。我的理解是第一次在3条全部展开后在点击其中任意一条时首先收缩了全部的内容 然后在展开被点击的那条。可第一次点击时好象没执行最后一句。
      

  3.   

    <script >
    var i = 10;
    function divClick(tb){
    var n = event.srcElement.parentNode.rowIndex;
    var orow = tb.rows.length;
    if(n%2==0){
        for(var i =0;i<orow;i++){            if((i==0||i!=n) && (i%2==0)){    
                tb.rows[i+1].style.display = "none";
                }
            }            with(tb.rows[n+1].style) display = display=="none" ? "block" : "none";}}</script><body >
    <TABLE onclick="divClick(this)">
    <TR >
        <TD>1:科学 </TD>
    </TR>
    <TR >
        <TD> 科学介绍XXXXXXX 
              XXXXXXXX... </TD>
    </TR>
    <TR>
        <TD> 2：化学 </TD>
    </TR>
    <TR>
        <TD> 化学介绍XXXXXX 
              XXXXXXXX.... </TD>
    </TR>
    <TR>
        <TD> 3.体育 
     </TD>
    </TR>
    <TR>
        <TD> 体育介绍XXXXXX 
              XXXXXXXX....  </TD>
    </TR></TABLE></body>
      

  4.   

    感谢....不过还是有一点小问题 第一次只能点第一个 点第2个就不行了 不过还是谢谢了 没基础做这东西确实费劲...能不能告诉我下event.srcElement.parentNode.rowIndex;这句话的意思？
      

  5.   


    event.srcElement.parentNode.rowIndex//取得父节点的行索引。。event.srcElement：点击的对象