今天給大家講解一個下指示點，是關於主題分類展開效果的默認修改方法。

情況如下：當我們默認打開一個帖子列表頁的時候，如果這個帖子類表也存在的主題分類非常多的話，他默認就會摺疊起來，但是我們通常希望默認丟失讓他展開的，這樣有利於用户第一次能直觀的看到這個版塊下的分類。

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. }