关于for循环中
0
[待解决问题]
代码是这样的
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 *{margin:0;padding:0;} 8 9 .menu{position:absolute; 10 margin-top:100px; 11 border:1px solid #999; 12 width:200px; 13 left:50%; 14 margin-left:-100px; 15 } 16 p{ 17 height:30px; 18 line-height:30px; 19 list-style:none; 20 font-family:"微软雅黑"; 21 font-weight:bolder; 22 background-color:#CCC; 23 border-bottom:1px solid #999; 24 } 25 ul { 26 display:none;} 27 li { 28 height:30px; 29 list-style:none; 30 line-height:30px; 31 border-bottom:1px solid #999; 32 } 33 </style> 34 <script type="text/javascript"> 35 //type="application/javascript"写错了； 36 window.onload=function(){ 37 var menu=document.getElementById('menu'); 38 var ps=menu.getElementsByTagName('p'); 39 var uls=menu.getElementsByTagName('ul'); 40 for(var i=0;i<ps.length;i++){ 41 ps[i].id=i; 42 ps[i].onclick=function(){ 43 var u=uls[ps[i].id]; 44 if(u.style.display=='none'){ 45 u.style.display='block'; 46 }else{u.style.display='none'} 47 //上面的判断语句不能只写前半句，否则无法执行 48 } 49 } 50 } 51 </script> 52 </head> 53 <body> 54 <!--今天主动用到文字垂直方向上剧中的技巧；--> 55 <div class="menu" id="menu"> 56 <div > 57 <p>Web前端</p> 58 <ul> 59 <li>JavaSript</li> 60 <li>DIV+CSS</li> 61 <li>jquery</li> 62 </ul> 63 </div> 64 65 <div > 66 <p>后台脚本</p> 67 <ul> 68 <li>PHP</li> 69 <li>ASP</li> 70 <li>JSP</li> 71 </ul> 72 </div> 73 74 <div > 75 <p>前端框架</p> 76 <ul> 77 <li>Ext js</li> 78 <li>Esspress</li> 79 <li>YUI</li> 80 </ul> 81 </div> 82 </div> 83 </body> 84 </html>
上面运行的结果是这样的
我的问题是，将41行代码改成下面这样，就会出现bug,
1 var id=i; //各位注意这里哦，就这里我不知道 2 ps[i].onclick=function(){ 3 var u=uls[id]; 4 if(u.style.display=='none'){ 5 u.style.display='block'; 6 }else{u.style.display='none'}
改动过的代码，运行结果是这样的，点击任何一个标签的结果是一样的
不知道，是什么原理？
所有回答(4)
0
简单点jquery不行吗？
不会啊，还在学习中，请教您一下这个怎么解
0
少了个 }
好吧，我的问题不够详细，我改详细一点
问题的详细情况是这样的，我改动一点代码以后啦，每次点击，都是一样的下拉标签，都是最后一个下拉标签显示出来，而不是对应的标签下的框显示出来
@zhang1231: 我看了下，在onclick时间里面弹出来的id始终是2,所以就只有最后一个显示隐藏；
怎样解决不清楚我对js也不是很熟悉，但是对于jquery这个就不是问题。
$("p").click(function () {
$(this).siblings("ul").slideToggle();
})
0
你是点其中一个，就出现一组吗？
0
很简单，因为 style 属性第一次只能去到行内样式，取不到内联样式和外部样式
可以使用 currentStyle 或者 computeStyle
但是，一般这种情况就是用切换类样式来搞定，没有你这样的写法，直接一个classList 搞定了。
