首页 > 代码库 > display=""的悲剧
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>
display=""的悲剧