救命啊！js树状导航，想了好多天都看不出错在哪！！

<!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=gb2312" />
<title>js导航条</title>
</head><body>
<ul id=all>
<li><a href="#">[-]这是第1章</a>
<ul>
<li><a href="#">[-]这是第1章第1节</a>
<ul>
<li>[-]这是第1章第1节第1小点</li>
<li>[-]这是第1章第1节第2小点</li>
<li>[-]这是第1章第1节第3小点</li>
</ul>

</li>
<li><a href="#">这是第1章第2节</a></li>
<li><a href="#">这是第1章第3节</a></li>

</ul>


</li>
<li><a href="#">[-]这是第2章</a>
<ul>
<li><a href="#">[-]这是第2章第1节</a>
<ul>
<li>这是第2章第1节第1小点</li>
<li>这是第2章第1节第1小点</li>
<li>这是第2章第1节第1小点</li>
</ul>

</li>
<li><a href="#">[-]这是第2章第2节</a></li>
<li><a href="#">[-]这是第3章第3节</a></li>

</ul>
</li>
<li><a href="#">[-]这是第3章</a>
<ul>
<li><a href="#">[-]这是第1章第1节</a>
<ul>
<li><a href="#">[-]这是第3章第1节第1小点
                </a>
  <ul><li>这是第3章第1节第1小点第一行</li>
<li>这是第3章第1节第1小点第二行</li>
</ul>

  </li>
<li><a href="#">[-]这是第3章第1节第2小点</a></li>
<li><a href="#">[-]这是第3章第1节第3小点</a></li>
</ul>

</li>
<li><a href="#">这是第3章第2节</a></li>
<li><a href="#">这是第3章第3节</a></li>

</ul> </li>
<li><a href="#">这是第4章</a></li>
</ul></body>
<script language="JavaScript"><!--
function inidall(obj)
{if(obj.getAttribute("id")=="all")//判断是否在根节点下，有没有二级菜单

{return true;
}
if(obj.nodeType==9)
{return false;}
else{
return inidall(obj.parentNode);//返回上一节点
}
//alert("inidall函数完毕");
}
function bdMenu(obj)
{
if(obj.nextSibling||obj.nextSibling.nextSibling)//判断是否有下一个节点
{var nextobj=new Object();
nextobj=obj; //alert("nextovj="+nextobj); while(nextobj.nextSibling&&nextobj.nextSibling.nodeType!=9)//nextobj.indexOf("[")
{ //alert("这是bdMenu函数开头");
if(nextobj.style.display=="block")//this.nextSibling.nextSibling.style.display=="block")
{nextobj.style.display="none";
nextobj.innerHTML=nextobj.innerHTML.replace("-","+");
}
else{
nextobj.style.display="block";
nextobj.innerHTML=nextobj.innerHTML.replace("+","-");


}
nextobj=nextobj.nextSibling;
}
}
}
function fu(){
var as=document.getElementsByTagName("a");
var uls = document.getElementsByTagName("ul");
var idall=document.getElementById("all");
for(var i=0;i<as.length;i++)
{
if(inidall(as[i]))
{as[i].onclick=bdMenu(as[i]);//单击绑定bdmenu()函数


}
}
for(var i=1;i<as.length;i++)//初始化菜单
{as[i].style.display="none";
as[i].innerHTML=as[i].innerHTML.replace("-","+");
}



}
 fu();
//--></script> </html>
报错为：nextobj.style is undefined

解决方案 »

  1.   


    <!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=gb2312" />
    <title>js导航条</title>
    </head>
    <body>
    <ul id = "all">
    <li><a href="#">[-]这是第1章</a>
    <ul>
    <li><a href="#">[-]这是第1章第1节</a>
    <ul>
    <li>[-]这是第1章第1节第1小点</li>
    <li>[-]这是第1章第1节第2小点</li>
    <li>[-]这是第1章第1节第3小点</li>
    </ul>
    </li>
    <li><a href="#">这是第1章第2节</a></li>
    <li><a href="#">这是第1章第3节</a></li>
    </ul>
    </li>
    <li><a href="#">[-]这是第2章</a>
    <ul>
    <li><a href="#">[-]这是第2章第1节</a>
    <ul>
    <li>这是第2章第1节第1小点</li>
    <li>这是第2章第1节第1小点</li>
    <li>这是第2章第1节第1小点</li>
    </ul>
    </li>
    <li><a href="#">[-]这是第2章第2节</a></li>
    <li><a href="#">[-]这是第3章第3节</a></li>
    </ul>
    </li>
    <li><a href="#">[-]这是第3章</a>
    <ul>
    <li><a href="#">[-]这是第1章第1节</a>
    <ul>
    <li><a href="#">[-]这是第3章第1节第1小点 </a>
    <ul>
    <li>这是第3章第1节第1小点第一行</li>
    <li>这是第3章第1节第1小点第二行</li>
    </ul>
    </li>
    <li><a href="#">[-]这是第3章第1节第2小点</a></li>
    <li><a href="#">[-]这是第3章第1节第3小点</a></li>
    </ul>
    </li>
    <li><a href="#">这是第3章第2节</a></li>
    <li><a href="#">这是第3章第3节</a></li>
    </ul>
    </li>
    <li><a href="#">这是第4章</a></li>
    </ul>
    </body>
    <script language="JavaScript">
    var TreeControl = function(id){
    var _box = document.getElementById(id);
    this.title = _box.getElementsByTagName("a");
    this.cont = _box.getElementsByTagName("ul");
    this.init();
    }TreeControl.prototype ={
    init: function(){
    var _len = this.title.length;
    var _self = this;
    for(var i = 0; i < _len; i++){
    var _list = this.getList(this.title[i]);
    if(_list){
    _list.style.display = 'none';
    this.resetFlag(this.title[i], 'close');
    }
    this.title[i].onclick = function(){_self.open(this);};
    }
    },
    getList: function(title){
    var _obj = title;
    var _list = _obj.parentNode.childNodes;
    var _len = _list.length;
    for(var i = 0; i < _len; i++){
    if(_list[i].nodeName.toLowerCase() == 'ul'){
    return _list[i];
    }
    }
    return false;
    },
    open: function(obj){
    var _list = this.getList(obj);
    if(_list){
    if(_list.style.display == 'none'){
    _list.style.display = 'block';
    this.resetFlag(obj, 'open');
    }else{
    _list.style.display = 'none';
    this.resetFlag(obj, 'close');
    }
    }
    },
    resetFlag: function(obj, flag){
    if(flag == 'open'){
    obj.innerHTML = obj.innerHTML.replace("+","-");
    }else{
    obj.innerHTML = obj.innerHTML.replace("-","+");
    }
    }
    }new TreeControl('all');
    </script>
    </html>
      

  2.   

    as[i].onclick=bdMenu(as[i]);你这句话就有问题。你在绑定事件的时候。就执行了该事件。bdMenu采用闭包的方式返回一个Handler.（）js执行。
      

  3.   

    首先赞下1楼的程序写的非常优雅！
    我修改了下楼主的代码，解决掉nextobj.style is undefined
    <!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>js导航条</title>
        </head>
        <body>
            <ul id="all">
                <li>
                    <a href="#">[<span>+</span>]这是第1章</a>
                    <ul>
                        <li>
                            <a href="#">[<span>+</span>]这是第1章第1节</a>
                            <ul>
                                <li>
                                    [-]这是第1章第1节第1小点
                                </li>
                                <li>
                                    [-]这是第1章第1节第2小点
                                </li>
                                <li>
                                    [-]这是第1章第1节第3小点
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">这是第1章第2节</a>
                        </li>
                        <li>
                            <a href="#">这是第1章第3节</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">[<span>+</span>]这是第2章</a>
                    <ul>
                        <li>
                            <a href="#">[<span>+</span>]这是第2章第1节</a>
                            <ul>
                                <li>
                                    这是第2章第1节第1小点
                                </li>
                                <li>
                                    这是第2章第1节第1小点
                                </li>
                                <li>
                                    这是第2章第1节第1小点
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">[-]这是第2章第2节</a>
                        </li>
                        <li>
                            <a href="#">[-]这是第3章第3节</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">[<span>+</span>]这是第3章</a>
                    <ul>
                        <li>
                            <a href="#">[<span>+</span>]这是第1章第1节</a>
                            <ul>
                                <li>
                                    <a href="#">[<span>+</span>]这是第3章第1节第1小点</a>
                                    <ul>
                                        <li>
                                            这是第3章第1节第1小点第一行
                                        </li>
                                        <li>
                                            这是第3章第1节第1小点第二行
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">[-]这是第3章第1节第2小点</a>
                                </li>
                                <li>
                                    <a href="#">[-]这是第3章第1节第3小点</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">这是第3章第2节</a>
                        </li>
                        <li>
                            <a href="#">这是第3章第3节</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">这是第4章</a>
                </li>
            </ul>
        </body>
        <script type="text/javascript">
            
            <!--
            function inidall(obj){
                if (obj.getAttribute("id") == "all")//判断是否在根节点下，有没有二级菜单
                {
                    return true;
                }
                if (obj.nodeType == 9) {
                    return false;
                }
                else {
                    return inidall(obj.parentNode);//返回上一节点
                }
                //alert("inidall函数完毕");
            }
            
            
            function bdMenu(obj){

    var oLink =document.getElementsByTagName("a")[obj];
    var nextobj = oLink.parentNode.getElementsByTagName("ul")[0];

                if (nextobj)//判断是否有下一个节点
                {
                        if (nextobj.style.display == "none")
                        {
                            nextobj.style.display = "block";
    oLink.getElementsByTagName("span")[0].innerHTML = "-" 
                        }
                        else {
                            nextobj.style.display = "none";
    oLink.getElementsByTagName("span")[0].innerHTML = "+" 
                            
                        }            }
            }
            
            
            function fu(){
                var as = document.getElementsByTagName("a");
                var uls = document.getElementsByTagName("ul");
                var idall = document.getElementById("all");

                for (var i = 0; i < as.length; i++) {
                   // if (inidall(as[i])) {
                       as[i].onclick = (function(arg){
        return function(){
    bdMenu(arg);
    };
       })(i)
       
       //单击绑定bdmenu()函数
                       /* as[i].onclick = function(){
    alert('dddd')
    }*/
                   // }
                }
    /*
                for (var i = 1; i < as.length; i++)//初始化菜单
                {
                    as[i].style.display = "none";
                    as[i].innerHTML = as[i].innerHTML.replace("-", "+");
                    
                    
                }
                */
                
                
            }
            
            fu();
            //-->
            
        </script>
    </html>
      

  4.   

    各位大哥，我知我很菜啊，上面代码好多都看得不太明白，甚至一点也看不懂，能解释下吗？比如as[i].onclick = (function(arg){
                           return function(){
                            bdMenu(arg);
                        };})(i)
    点解要用函数包含一个函数啊？arg传递的是什么啊？为什么（fun、、、)(i)里面放的是函数而不是数组名呢？
    一楼的更看不懂，能说下知识点吗？我想找点相关资料学习下，多谢！！
    ，要不讲我知知识要点，我去网上找，多谢先啦！！！