首页新闻找找看学习计划

关于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'}
复制代码

改动过的代码,运行结果是这样的,点击任何一个标签的结果是一样的

 

不知道,是什么原理?

zhang1231的主页 zhang1231 | 菜鸟二级 | 园豆:202
提问于:2016-08-17 15:31
< >
分享
所有回答(4)
0

简单点jquery不行吗?

顾晓北 | 园豆:9530 (大侠五级) | 2016-08-17 15:36

不会啊,还在学习中,请教您一下这个怎么解

支持(0) 反对(0) zhang1231 | 园豆:202 (菜鸟二级) | 2016-08-17 15:47
0

少了个  }

 

忧虑的心 | 园豆:165 (初学一级) | 2016-08-17 15:38

好吧,我的问题不够详细,我改详细一点

支持(0) 反对(0) zhang1231 | 园豆:202 (菜鸟二级) | 2016-08-17 15:50

问题的详细情况是这样的,我改动一点代码以后啦,每次点击,都是一样的下拉标签,都是最后一个下拉标签显示出来,而不是对应的标签下的框显示出来

支持(0) 反对(0) zhang1231 | 园豆:202 (菜鸟二级) | 2016-08-17 15:54

@zhang1231: 我看了下,在onclick时间里面弹出来的id始终是2,所以就只有最后一个显示隐藏;

怎样解决不清楚我对js也不是很熟悉,但是对于jquery这个就不是问题。

$("p").click(function () {
$(this).siblings("ul").slideToggle();
})

支持(0) 反对(0) 忧虑的心 | 园豆:165 (初学一级) | 2016-08-17 17:10
0

你是点其中一个,就出现一组吗?

 

爱吃de馒头 | 园豆:255 (菜鸟二级) | 2016-08-17 21:15
0

   很简单,因为 style 属性第一次只能去到行内样式,取不到内联样式和外部样式

   可以使用 currentStyle 或者 computeStyle

  但是,一般这种情况就是用切换类样式来搞定,没有你这样的写法,直接一个classList 搞定了。

小精灵儿Pawn | 园豆:470 (菜鸟二级) | 2016-08-18 10:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册