今天给大家讲解一个下指示点，是关于主题分类展开效果的默认修改方法。

情况如下：当我们默认打开一个帖子列表页的时候，如果这个帖子类表也存在的主题分类非常多的话，他默认就会折叠起来，但是我们通常希望默认丢失让他展开的，这样有利于用户第一次能直观的看到这个版块下的分类。

1.png

下面我就带着大家看看如何将它的默认状态修改为展开，首先我们打开这个模板页的模板文件，forumdisplay_list.htm 找到这段代码

<scripttype="text/javascript">showTypes('thread_types');</script>

找到这个这个展开/收起的按钮时如何生成的。

  1. function showTypes(id) {
  2.         var o = $(id);
  3.         if(!o) return false;
  4.         var s = o.className;
  5.         var baseh = o.getElementsByTagName('li')[0].offsetHeight * 2;
  6.         var tmph = o.offsetHeight;
  7.         var lang = ['展开', '收起'];
  8.         var cls = ['unfold', 'fold'];
  9.         if(tmph > baseh) {
  10.                 var octrl = document.createElement('li');
  11.                 octrl.className = cls[0];
  12.                 octrl.innerHTML = lang[0];
  14.                 o.insertBefore(octrl, o.firstChild);
  15.                 o.className = s + ' cttp';
  17.                 octrl.onclick = function () {
  18.                         if(this.className == cls[0]) {
  19.                                 o.style.height = 'auto';
  20.                                 this.className = cls[1];
  21.                                 this.innerHTML = lang[1];
  22.                         } else {
  23.                                 o.style.height = '';
  24.                                 this.className = cls[0];
  25.                                 this.innerHTML = lang[0];
  26.                         }
  27.                 }
  28.         }
  29. }

通过这段代码我们看到，默认的状态下如果主题分类不够多的话是没有那个控制按钮的，程序通过判断主题分类中的个数对<ul id="thread_types" > 的影响从而添加相应的代码，从而控制主题分类的显隐。

首先 var baseh = o.getElementsByTagName('li')[0].offsetHeight * 2;

根据第一个主题分类的高乘以 2，来判断主题分类的个数是否达到了 2 行。 var tmph = o.offsetHeight; 将会读取当前主题分类的父框的考度，如果超过了两行，他的实际高度就会大于 baseh，则执行下面的代码，通过 css 默认隐藏掉多余的主题分类。然后插入展开/收起的控制按钮，并绑定 onclick 事件，进行逆操作。经过修改后的函数变为：

  1. function showTypes(id) {
  2.         var o = $(id);
  3.         if(!o) return false;
  4.         var s = o.className;
  5.         var baseh = o.getElementsByTagName('li')[0].offsetHeight * 2;
  6.         var tmph = o.offsetHeight;
  7.         var lang = ['展开', '收起'];
  8.         var cls = ['unfold', 'fold'];
  9.         if(tmph > baseh) {
  10.                 var octrl = document.createElement('li');
  11.                 octrl.className = cls[1];
  12.                 octrl.innerHTML = lang[1];
  14.                 o.insertBefore(octrl, o.firstChild);
  15.                 o.className = s + ' cttp';
  16.                 o.style.height = 'auto';
  18.                 octrl.onclick = function () {
  19.                         if(this.className == cls[0]) {
  20.                                 o.style.height = 'auto';
  21.                                 this.className = cls[1];
  22.                                 this.innerHTML = lang[1];
  23.                         } else {
  24.                                 o.style.height = '';
  25.                                 this.className = cls[0];
  26.                                 this.innerHTML = lang[0];
  27.                         }
  28.                 }
  29.         }
  30. }