展开和折叠文件夹 [英] expanding and collapsing folders

问题描述

我需要获得多个元素来切换打开和关闭.现在该功能只是选择 ID，但我想知道如何让它选择一个类.我以为我可以将 document.getElementById 更改为 document.getElementByClass 但这不起作用.

I need to get more than one element to toggle open and closed. Right now the function is just selecting the ID, but I'd like to know how to get it to select a class. I thought I could change the document.getElementById to document.getElementByClass but that didn't work.

我在搜索过程中选择了这段代码:

I picked this bit of code during my search:

#ToggleTarget {display:hidden;}

<script type="text/javascript">
function Toggle() {
    var el = document.getElementById("ToggleTarget");
    if (el.style.display == "block") {
        el.style.display = "none";
    }
    else {
        el.style.display = "block";
    }
}
</script>

推荐答案

var getElementsByClassName = function(node, classname) {
    if (document.getElementsByClassName) { 
        return document.getElementsByClassName(classname);
    }
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

var Toggle = function(){
    var tp = getElementsByClassName(document.documentElement,'toggle');
        for(var i = 0; i < tp.length; i++){
            if(tp[i].style.display=='none')
                tp[i].style.display='block'
            else
                tp[i].style.display='none'
    }
}

使用 getElementsByClassName 然后遍历它们.

Use getElementsByClassName and then loop through them.

编辑

只要确保他们有我上面代码中使用的 toggle 类.

Just make sure they have the class toggle as used in my code above.

更新

添加了 IE 支持功能(采用自 https://stackoverflow.com/a/7410966/600101).

Added function for IE support (adopted from https://stackoverflow.com/a/7410966/600101).

这篇关于展开和折叠文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！