display=""的悲剧

在学习tab选项卡的时候，要做到点击标题时判断该标题下的菜单是否显示，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7     *{margin:0;
 8      padding:0;
 9      font-size:13px;
10      list-style:none;}
11 
12 .menu{width:210px;
13       margin:50px auto;
14       border:1px solid #ccc;}
15 
16 .menu p{height:25px;
17         line-height:25px;
18         font-weight:bold;
19         background:#eee;
20         border-bottom:1px solid #ccc;
21         cursor:pointer;
22         padding-left:5px;}
23 
24 .menu div ul{display:none;}
25 
26 .menu li{height:24px;
27          line-height:24px;
28          padding-left:5px;}
29 </style>
30     
31 </head>
32 <body>
33     <div class="menu" id="menu">
34         <div>
35             <p>Web前端</p>
36             <ul style="display:block">
37                 <li>JavaScript</li>
38                 <li>DIV+CSS</li>
39                 <li>jQuery</li>
40             </ul>
41         </div>
42         <div>
43             <p>后台脚本</p>
44             <ul>
45                 <li>PHP</li>
46                 <li>ASP.net</li>
47                 <li>JSP</li>
48             </ul>
49         </div>
50         <div>
51             <p>前端框架</p>
52             <ul>
53                 <li>Extjs</li>
54                 <li>Esspress</li>
55                 <li>YUI</li>
56             </ul>
57         </div>
58     </div>
59 <script type="text/javascript">
60     function fun(str) {
61             
62         return typeof str==='string'?document.getElementById(str):str;
63         }
64          
65         var ps=fun("menu").getElementsByTagName("p");
66 for (var i = ps.length - 1; i >= 0; i--) {            
67             ps[i].onclick=function(){
68                 
69                 if(this.nextSibling.style.display=="none"){
70                     this.nextSibling.style.display="block";        
71                 }
72                 else{
73                     this.nextSibling.style.display="none";
74                 }
75             }
76         }
77 </script>
78 </body>
79 </html>

注意：1)script放在后面是因为，在html文本加载完后，才取得到id为menu的节点，如果不放在后面，放在window.onload里面也可以。

　　　2)p标签后紧跟ul标签是因为，如果不这样，中间就会产生文本节点，p标签的下一个节点也就不是ul标签了

但是我发现，除了第一个ul在第一次点击ul的时候可以成功，其他两个ul在首次伸缩时需要经过两次，本人初涉javascript，研究了半天chrome如何调试断点后发现

在判断ul的display是否为none的时候，明明“后台脚本”和“前端框架”这两个块都是隐藏的，但是在第一次点击时跳到了else{this.nextSibling.style.display="none"}；然后在第二次点击的时候判断才为true，转到了设置display为block的那一步，所以在首次伸缩时需要点击两次。那么为什么隐藏的块第一次判定条件的时候会显示false呢？

结果反反复复调试后发现，第一次点击时，this.nextSibling.style.display=""，所以判断为false，那么“”是什么值，明明在css中设定display：none，并且也的确没有显示，为什么会变成“”

因为WEB前端只需点击一次就可成功，我就把目光移到了这两个的区别上，后来我发现，因为WEB前端在ul标签中设定了display=“block”，覆盖了原有的值，所以其他的ul标签会生成一个display=“”的内联式css与“WEB前端”的内联式相对于，而display=“”的意思即为保持原有值不变，则还是display：none。所以为了解决这个问题，有两种方法：

1、修改判断语句为：

1 var dis=this.nextSibling.style.display;
2 
3 if(dis=="none"||dis==""){
4 this.nextSibling.style.display="block";    
5 }
6 else{
7 this.nextSibling.style.display="none";
8 }

2：在其他两个ul的标签中也增加内联式css即：

1 <p>后台脚本</p><ul style="display:none">
2 <li>PHP</li>
3 <li>ASP.net</li>
4 <li>JSP</li>
5 </ul>

 

posted @ 2016-09-17 14:15  swii  阅读(341)  评论(0)  编辑  收藏  举报