discuzx帖子列表頁，主題分類默認展開修改的具體方法

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

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

下面我就帶著大家看看如何將它的默認狀態(tài)修改為展開，首先我們打開這個模板頁的模板文件，forumdisplay_list.htm找到這段代碼

showTypes('thread_types');

找到這個這個展開/收起的按鈕時如何生成的。

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];
    
13. 
    
14.                 o.insertBefore(octrl, o.firstChild);
    
15.                 o.className = s + ' cttp';
    
16. 
    
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. }

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

根據(jù)第一個主題分類的高乘以2，來判斷主題分類的個數(shù)是否達到了2行。var tmph = o.offsetHeight;將會讀取當前主題分類的父框的考度，如果超過了兩行，他的實際高度就會大于baseh，則執(zhí)行下面的代碼，通過css默認隱藏掉多余的主題分類。然后插入展開/收起的控制按鈕，并綁定onclick事件，進行逆操作。經(jīng)過修改后的函數(shù)變?yōu)椋?/font>

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];
    
13. 
    
14.                 o.insertBefore(octrl, o.firstChild);
    
15.                 o.className = s + ' cttp';
    
16.                 o.style.height = 'auto';
    
17. 
    
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. }

這樣就可以了，是不是非常簡單