JavaScript折叠式列表的网页制作

我们看到在数码艺术网的首页上，四个主要栏目版块中的列表是折叠式的。如下图：

当鼠标经过第二个标题时，第一个列表项折叠，第二个展开。大家想到了Ajax技术，不过这里的摘要信息并没有异步更新，而是提早加载好的。所以折叠列表虽然具有Ajax技术的动作特点，却不是Ajax。我只是通过Javascript控制<div>的隐藏和显示。

折叠列表的主要思路是，用规范的 Javascript DOM 编程来切换<div>的CSS类。ListSummary为显示，ListSummaryHidden为隐藏。（我把CSS的id和class名都用大写字母开头，以区别Javascript脚本程序里小写开头的习惯用法。）

首先，把第一个版块的HTML编写好，大致如下：
<div id="NewDesignInfo">
  <div class="PanelHead1">
    <div><a href="#"><img _fcksavedurl=""#"><img" _fcksavedurl=""#"><img" src="Icon_Title/PanelNameDeisgnNews.jpg" /></a></div>
  </div>
  <div class="PanelBody1">
    <ul class="List">
      <li class="ListItem">
        <div><span class="ListCateLog">[<a href="#">子栏目一</a>] </span><span class="ListTitle"><a href="#">标题Javascript折叠式列表的制作</a></span><span class="ListDate">2005-05-12</span></div>
        <div class="ListSummaryHidden"><img src="TempImages/ThumbImg.jpg" class="ListThumb" />我们看到在数码艺术网（http://www.hutda.cn）的首页上，四个主要栏目版块中的列表是折叠式的。如下图，当鼠标经过第二个标题，第一个列表项折叠，第二个...</div>
      </li>
      <li class="ListItem">
        <div><span class="List

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!