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

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

下面我就带着大家看看如何将它的默认状态修改为展开，首先我们打开这个模板页的模板文件，forumdisplay_list.htm找到这段代码

<scripttype="text/javascript">showTypes('thread_types');</script>

找到这个这个展开/收起的按钮时如何生成的。

function showTypes(id) {

       var o = $(id);

       if(!o) return false;

       var s = o.className;

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

       var tmph = o.offsetHeight;

       var lang = ['展开', '收起'];

       var cls = ['unfold', 'fold'];

       if(tmph > baseh) {

               var octrl = document.createElement('li');

               octrl.className = cls[0];

               octrl.innerHTML = lang[0];

               o.insertBefore(octrl, o.firstChild);

               o.className = s + ' cttp';

               octrl.onclick = function () {

                       if(this.className == cls[0]) {

                               o.style.height = 'auto';

                               this.className = cls[1];

                               this.innerHTML = lang[1];

                       } else {

                               o.style.height = '';

                               this.className = cls[0];

                               this.innerHTML = lang[0];

                       }

               }

       }

}

通过这段代码我们看到，默认的状态下如果主题分类不够多的话是没有那个控制按钮的，程序通过判断主题分类中的个数对<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事件，进行逆操作。经过修改后的函数变为：

function showTypes(id) {

       var o = $(id);

       if(!o) return false;

       var s = o.className;

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

       var tmph = o.offsetHeight;

       var lang = ['展开', '收起'];

       var cls = ['unfold', 'fold'];

       if(tmph > baseh) {

               var octrl = document.createElement('li');

               octrl.className = cls[1];

               octrl.innerHTML = lang[1];

               o.insertBefore(octrl, o.firstChild);

               o.className = s + ' cttp';

               o.style.height = 'auto';

               octrl.onclick = function () {

                       if(this.className == cls[0]) {

                               o.style.height = 'auto';

                               this.className = cls[1];

                               this.innerHTML = lang[1];

                       } else {

                               o.style.height = '';

                               this.className = cls[0];

                               this.innerHTML = lang[0];

                       }

               }

       }

}