JavaScript实现分类列表显示与隐藏的切换

这些代码也许看上去挺长的，其实真正实现功能的代码也就那么几行。因为我懒得重新写页面，也就是不从数据库中取值，而是单纯的实现显示与隐藏小分类的切换，这样效果也是一样的。但是实际中，往往都是要从数据库中取值的，例如添加或删除了分类什么的，所以直接用商城项目里的代码了。

为方便新手理解，也怕日后自己会忘记，就添加些注释，方便理解。如果出错了，记得把注释删掉就行了，在项目里是确实可以运行的。

其中

${suplist}、${sublist}分别存放的是商品的大分类与小分类。其值是由后台赋值的，其类型为List<>（列表）。实际运行时，只需将你们已赋值的参数替换进来即可。如果有java web学习经验，应该是很好理解的。可能我的表达不好..

至于图片(images/plugin/jia.gif、images/plugin/jian.gif)没有的话，直接把相关代码删了即可。或者替换成你们有的图片，请注意路径。

实现切换的JavaScript函数：

<script language="javascript">  function Showtr(img,opentr){      <!-- 判断对象opentr是否隐藏，若隐藏则显示，相反，则显示 //-->      opentr.style.display=opentr.style.display=='none'?'block':'none';      if(opentr.style.display=='block'){         <!-- 设置img对象的图片，即实现图片的切换 //-->         img.src="images/plugin/jian.gif";      }else{          img.src="images/plugin/jia.gif";       }  }</script>

如果不懂jstl(也就是<c:  >标签)，就花一两个小时的时间去看看，很快就可以理解的。

<div id="left"><font size="5" >商品分类：</font><br><table class="SuperType" cellpadding="5">  <c:forEach var="suplist" items="${suplist }" varStatus="sup">  <tr>    <td>      <!-- ${sup.index}是遍历的次数，img${sup.index}可保证命名的唯一性 -->      <a href="Javascript:Showtr(img${sup.index },opentr${sup.index })">      <img src="images/plugin/jia.gif" id="img${sup.index }"></a>      <a href="Javascript:Showtr(img${sup.index },opentr${sup.index })">${suplist.typeName }</a>    </td>  </tr>    <tr id="opentr${sup.index }" style="display:none;">      <td>              <table>                 <c:forEach var="sublist" items="${sublist[sup.index]}" varStatus="s">            <tr onMouseOver="this.style.background='#EEEEEE'" onMouseOut="this.style.background=''">              <td>  <a href="goods_sortdisplay.lzw?id=${sublist.id }&supname=${suplist.typeName}&subname=${sublist.typeName}">${sublist.typeName}</a>  </td>            </tr>          </c:forEach>        </table>            </td>  </tr>    </c:forEach></table></div>

不行！实在是懒得写注释！