目标是:点击一级菜单“one”时,显示二级菜单“one.1,one.2,....”
代码如下:
- JScript code
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="www.budingwang.com" /> <title>无标题 1</title> <style> *{margin:0px;padding:0px;} li{list-style: none;} li > ul{display:none;} </style> </head> <body> <ul id="tree"> <li> <a id="first" href="#">one</a> <ul id="first_child"> <li>one.1</li> <li>one.2</li> </ul> </li> </ul> </body> <script> document.getElementById("first").addEventListener("click",nodeAction,false); function nodeAction(){ if(document.getElementById("first_child").style.display=="block"){ //这里为none时,前两次点击有效,之后无效,搞不懂??? document.getElementById("first_child").style.display="none"; }else{ document.getElementById("first_child").style.display="block"; } } </script> </html>
------解决方案--------------------
- JScript code
document.getElementById("first").addEventListener("click",nodeAction,false); function nodeAction(){ if(document.getElementById("first_child").style.display=="none"){ //这里为none时,前两次点击有效,之后无效,搞不懂??? document.getElementById("first_child").style.display="block"; }else{ document.getElementById("first_child").style.display="none"; } }
------解决方案--------------------
li > ul{display:none;}应该为你这里设置了它隐藏
------解决方案--------------------
我用ie9和谷歌测试均没有问题。。。。。。。可能是浏览器兼容问题,建议用jquery写吧
------解决方案--------------------