关于js中display:block与none 的切换

<!DOCTYPE html>





树形菜单
<br> *{<br> padding: 0px;<br> margin: 0px auto;<br> }<br> div{<br><br> margin: 20px 0px 0px 30px;<br> }<br> ul{<br> display: none;<br> padding: 10px 0px 0px 40px;<br> }<br> span{<br> font-size: 18px;<br> }<br> li{<br> font-size: 14px;<br> line-height: 28px;<br> }<br> .icon{<br> list-style-image: url(images/icon-top.gif)<br> }<br> .end{<br> list-style-image: url(images/icon-end.gif)<br> }<br>
<br> window.onload=function(){<br> var imgs=document.getElementsByTagName(&quot;img&quot;);<br> var uls=document.getElementsByTagName(&quot;ul&quot;);</p> <pre><code> for(var i=0;i&lt;imgs.length;i++){ imgs[i].index=i; uls[i].index=i; imgs[i].onclick=function(){ if(uls[this.index].style.display=&quot; &quot;){ uls[this.index].style.display=&quot;block&quot;; }else{ uls[this.index].style.display=&quot; &quot;; } } } } &lt;/script&gt; </code></pre> <p></head><br> <body><br> <div><br> <img src="images/classfiy.jpg" alt=""><br> <span>分类讨论区</span><br> <ul class="icon"><br> <li class="front">BBS系统</li><br> <li>共建水木</li><br> <li>站务公告栏</li><br> <li>妆点水木</li><br> <li class="end">申请版主</li><br><br> </ul><br><br> </div></p> <pre><code>&lt;div&gt; &lt;img src=&quot;images/info.jpg&quot; alt=&quot;&quot;&gt; &lt;span&gt;社会信息&lt;/span&gt; &lt;ul class=&quot;icon&quot;&gt; &lt;li class=&quot;front&quot;&gt;美容品与饰品代理&lt;/li&gt; &lt;li&gt;考研资料市场&lt;/li&gt; &lt;li&gt;商海纵横&lt;/li&gt; &lt;li&gt;动物保护者&lt;/li&gt; &lt;li&gt;动物世界&lt;/li&gt; &lt;li class=&quot;end&quot;&gt;中国风·神州各地&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&quot;images/entertain.jpg&quot; alt=&quot;&quot;&gt; &lt;span&gt;休闲娱乐&lt;/span&gt; &lt;ul class=&quot;icon&quot;&gt; &lt;li class=&quot;front&quot;&gt;射击类游戏&lt;/li&gt; &lt;li&gt;动作类游戏&lt;/li&gt; &lt;li&gt;益智类小游戏&lt;/li&gt; &lt;li&gt;恐怖游戏&lt;/li&gt; &lt;li class=&quot;end&quot;&gt;单机游戏&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&quot;images/tech.jpg&quot; alt=&quot;&quot;&gt; &lt;span&gt;电脑技术&lt;/span&gt; &lt;ul class=&quot;icon&quot;&gt; &lt;li class=&quot;front&quot;&gt;C&lt;/li&gt; &lt;li&gt;C++&lt;/li&gt; &lt;li&gt;C#&lt;/li&gt; &lt;li&gt;JAVA&lt;/li&gt; &lt;li&gt;javascript&lt;/li&gt; &lt;li class=&quot;end&quot;&gt;oracle&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p></body><br> </html></p>

首先,这段代码无法看,可能是提问的时候格式错误了,提问是如果有代码应该用代码特殊符号包裹起来。
其次,display 的 隐藏和显示,对应用 jquery 的方法

$("#id").hide();
$(#id").show()

虽然没有看你的代码,但是可分享你我的做法
if($("#id").is(":hidden")){
$("#id").show(); //如果元素为隐藏,则将它显现
}else{
$("#id").hide(); //如果元素为显现,则将其隐藏
}