- HTML code
<html> <head> <script language="javascript"> function change(obj) { if(obj.innerText=="[-]") { obj.innerText="[+]"; }else{ obj.innerText="[-]"; } } </script> </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>
在这段代码的基础上帮我实现下,点击相应的span后隐藏相应的ul列表,代码不要太复杂,我刚开始学,代码越简单越好,方法最好是通用的,不要在ul里添加id或是class,如果有几十个ul列表,那不是要添加几十个啊。
------解决方案--------------------
纠正一点你的错误,你p的结束符写错了,应该是</p>而不是<p/>
下面是隐藏显示代码,很简单。就是找到当前p的下一个元素ul就行了
- JScript code
function change(obj) { if (obj.innerText == "[-]") { obj.innerText = "[+]"; 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; }