- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script language="javascript"> function change(obj) { if(obj.innerText=="[-]") { obj.innerText="[+]"; //下面的alert我测试了下,当前对象的.parentNode.nextSibling.nodeName //应该是ul,怎么弹出显示的是#text啊??? alert(obj.parentNode.nextSibling.nodeName); next(obj.parentNode).style.display = "none"; }else{ obj.innerText="[-]"; next(obj.parentNode).style.display = "block"; } } function next(elem) {//获得下一个元素节点 do { elem = elem.nextSibling; } while (elem && elem.nodeType != 1);//nodetype=1是元素节点 return elem; } </script> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div> <p><span onclick="change(this)">[-]</span>aaa</p> <ul> <li>aaaaaa</li> <li>aaaaaa</li> <li>aaaaaa</li> </ul> <p><span onclick="change(this)">[-]</span>bbb</p> <ul> <li>bbbbbb</li> <li>bbbbbb</li> <li>bbbbbb</li> </ul> <p><span onclick="change(this)">[-]</span>ccc</p> <ul> <li>cccccc</li> <li>cccccc</li> <li>cccccc</li> </ul> </div> </body> </html>
------解决方案--------------------
- JScript code
function change(obj) { if(obj.innerText=="[-]") { obj.innerText="[+]"; //下面的alert我测试了下,当前对象的.parentNode.nextSibling.nodeName //应该是ul,怎么弹出显示的是#text啊??? // alert(obj.parentNode.nextSibling.nodeName); var test = obj.parentNode.nextSibling; if(test.nodeName == "text"){ test = test.nextSibling; } alert(test.nodeName); next(obj.parentNode).style.display = "none"; }else{ obj.innerText="[-]"; next(obj.parentNode).style.display = "block"; } }