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

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

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

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

复制代码

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

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

复制代码

好！

先保存起来！

    本公司专业做php，java项目外包和人才派遣。QQ；1584414787
电话；13121777156     联系人；王懿芳

收藏起来！

很好

这个正好需要！谢谢了！