discuzx帖子列表页，主题分类默认展开修改的具体方法

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

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

下面我就带着大家看看如何将它的默认状态修改为展开，首先我们打开这个模板页的模板文件，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;

根据第一个主题分类的高乘以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];
    
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. }

这样就可以了，是不是非常简单