关于js实现简单的treeView的问题

1.需求
我想在html中简单做一个treeView，当点击+号可以展开它的项目2.代码<body>
<ul style="list-style-type: none;">
<li><span style="cursor: hand" onclick="controlDisplay(this)">+</span>水果
<ul>
<li>荔枝</li>
<li>雪梨</li>
</ul>
</li>
<li><span style="cursor: hand" onclick="controlDisplay(this)">+</span>蔬菜
<ul>
<li>白菜</li>
<li>辣椒</li>
</ul>
</li>
</ul>
</body><script type="text/javascript">function controlDisplay(obj) {
if(obj.innerText=="+"){ 
obj.innerText=="-";
obj.nextSibling.style.display="block";
}else if(obj.innerText=="-"){
obj.innerText=="+";
obj.nextSibling.style.display="none";
}
}</script>3.存在问题
不知道为什么没有起效果，那个nextSilixing是不是指示li中<span>旁边的<ul>?4.求助
请高手指教，小生能力有限，遂发帖求助，临帖涕零，不知所言.

解决方案 »

  1.   

    <body>
        <ul style="list-style-type: none;">
            <li><span style="cursor: hand" onclick="controlDisplay(this)">-</span>水果
                <ul>
                    <li>荔枝</li>
                    <li>雪梨</li>
                </ul>
            </li>
            <li><span style="cursor: hand" onclick="controlDisplay(this)">-</span>蔬菜
                <ul>
                    <li>白菜</li>
                    <li>辣椒</li>
                </ul>
            </li>
        </ul>
    <script type="text/javascript">function controlDisplay(obj) {
        if(obj.innerHTML=="+"){ 
            obj.innerHTML="-";
            safeGetNextSibling(obj).style.display="block";
        }else if(obj.innerHTML=="-"){
            obj.innerHTML="+";
            safeGetNextSibling(obj).style.display="none";
        }
    }function safeGetNextSibling(obj)
    {
    obj = obj.nextSibling
    while(obj.nodeType != 1)
    obj=obj.nextSibling
    return obj
    }
    </script>
    </body>
      

  2.   

    我可以给你做jquery的，呵呵，楼主要吗？
      

  3.   

    同意，不过用jQuery就更简单了。
      

  4.   

    尴尬了，没接触过jqury
    贴个jqury代码来震撼一下我啊