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

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

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