yzk0370

本来想把这个添加侧边栏面板开关功能做到皮肤的CSS文件里面的，无奈FF和IE6对expression支持不好（IE6甚至会死掉）。于是最终决定把这个功能做到JS里面，所有的浏览器都可以用。

当然这只是一个小小的功能，有什么不足的还望大家批评指出

原理：给每一个sidepanel添加一个onclick处理函数。
效果如图：

具体修改如下（在IE 6、IE 7、FF 2、Opera中均测试通过）：
common\common.js
修改函数initJS：

复制内容到剪贴板

代码:

//初始化JS代码
function initJS(){
        ReImgSize() //自动缩放代码
        initAccessKey()  //转换AccessKey For IE
        addPanelOnClick(); // 添加面板标题鼠标点击处理函数
}

在后面添加两个函数：

复制内容到剪贴板

代码:

// 添加面板标题鼠标点击处理函数
function addPanelOnClick(){
        var sideBar, panel;
        sideBar = document.getElementById("innersidebar");
        if (isIE()){// 是IE
                for(i = 1; i<sideBar.childNodes.length - 1; i++){
                        panel = sideBar.childNodes[i];
                        panel.childNodes[0].onclick = panelOnOff;
                }
        }
        else{// 不是IE，是Netscape, FireFox, Opera
                for(i = 3; i<sideBar.childNodes.length - 3; i++){
                        panel = sideBar.childNodes[i];
                        panel.childNodes[0].onclick = panelOnOff;
                }
        }
}

// 面板开关函数
function panelOnOff(){
        var node;
        node = this.parentNode.childNodes[1];
        node.style.display = (node.style.display == "") ? "none" : "";
}

==================== 华丽的分割线 ====================
看到有朋友发了一个示例代码，受到启发又修改了，增加动态效果
还是修改common\common.js，将上面新增的函数替换下面的代码~

复制内容到剪贴板

代码:

// 面板高度数组
var maxHeight;

// 获得面板索引
function getPanelIndex(obj){
        var sideBar, panel, start;
        sideBar = document.getElementById("innersidebar");
        start = isIE() ? 1 : 3;
        for(i = start; i < sideBar.childNodes.length - start; i++){
                panel = sideBar.childNodes[i];
                if (obj == panel.childNodes[1]){
                        return i - start;
                }
        }
        return -1;
}

// 面板开关动态效果
function panleOpenClose(obj, action){
        var index, curHeight, delat;
        var funcOpen, funcClose, intervalID;
        index = getPanelIndex(obj);
        delta = 1;
        if (action == "Open"){
                curHeight = 0;
                obj.style.display = "";
                funcOpen = function(){
                        delta *= 2.5;
                        curHeight += delta;                       
                        if (curHeight > maxHeight[index]){
                                obj.style.height = maxHeight[index] + "px";                               
                                clearInterval(intervalID);
                        }else{
                                obj.style.height = curHeight + "px";
                        }
                }
                intervalID = setInterval(funcOpen, 10);
        }
        if (action == "Close"){
                curHeight = maxHeight[index];
                obj.style.overflow = "hidden";
                funcClose = function(){
                        delta *= 2.5;
                        curHeight -= delta;
                        if (curHeight < 10){
                                obj.style.height = "0px";
                                obj.style.display = "none";
                                clearInterval(intervalID);
                        }else{
                                obj.style.height = curHeight + "px";
                        }
                }               
                intervalID = setInterval(funcClose, 10);
        }
}

// 面板开关函数
function panelOnClick(){
        var node, index;
        node = this.parentNode.childNodes[1];
        index = getPanelIndex(node);
        if (index == -1){
                return;
        }
        if (node.style.display == ""){
                panleOpenClose(node, "Close");
        }else{
                panleOpenClose(node, "Open");
        }
}

// 添加面板标题鼠标点击处理函数
function addPanelOnClick(){
        var sideBar, panel, start, tmpPT, tmpPB;
        sideBar = document.getElementById("innersidebar");
        start = isIE() ? 1 : 3;
        maxHeight = new Array(sideBar.childNodes.length - 2 * start);
        for(i = start; i<sideBar.childNodes.length - start; i++){
                panel = sideBar.childNodes[i];
                panel.childNodes[0].onclick = panelOnClick;
                panel.childNodes[0].title = "点击我试试看";        // 标题栏提示框，大家自己发挥创意改
                tmpPT = panel.childNodes[1].style.paddingTop;
                tmpPB = panel.childNodes[1].style.paddingBottom
                panel.childNodes[1].style.paddingTop = "0px";
                panel.childNodes[1].style.paddingBottom = "0px";
                maxHeight[i - start] = panel.childNodes[1].offsetHeight;
                panel.childNodes[1].style.paddingTop = tmpPT;
                panel.childNodes[1].style.paddingBottom = tmpPB;
        }
}

方便各位朋友，这里是修改过后的common.js文件：

不过唯一的不足在于，需要等页面完全载入以后功能才能开启。
演示地址：http://www.eternity3.com.cn/blog/

[ 本帖最后由 yzk0370 于 2007-2-11 01 编辑 ]

thomas

支持一下

毒BOY

一起来就看到好东西

Dev.7

頂了
好像之有PJ沒有這個東西吧

风影

不错,很喜欢!!!!!!!!

[ 本帖最后由 风影 于 2007-2-9 14:30 编辑 ]

sxn0508

终于见到啦！！等了好久了....

5design

是不是默认全部关闭 然后打开一个就自动关闭另一个哇

yzk0370

最新更新，增加动态效果~大家看看吧~

thw416

这种效果不错！！！！

dongfeel

牛B啊！