Question

我想在点击时切换div元素（展开/折叠）。我有很多div元素，点击新元素，我想折叠前一个元素并展开当前点击的元素。

我尝试使用静态类型变量来保存前一个div标签的实例并与当前选择进行比较，但我不知道它为什么不起作用。

搜索这个，我有类似的代码想法折叠所有div，然后只扩展当前选择，但我想只用新的切换前一个，而不是折叠所有div并扩展选中（虽然我会如果其他方式不可能使用它）

可以使用js的静态变量吗？

Answer 1

最简单的，你可以简单地做这样的事情：

var divs = document.getElementsByTagName('div'),
    collapseClass = 'collapsed',
    current = divs[0];

// Hide all elements except first, add click event hander
for(var i = 0, len = divs.length; i < len; i++){
    divs[i].onclick = function(){
        if(this !== current){
            toggle(this, current);
            current = this;
        }
    };

    if(i > 0) toggle(divs[i]);
}

这会将当前元素存储在变量中，然后在单击另一个元素时切换它。它还使用if语句来检查当前单击的元素是否是当前可见元素，并且只有在不是时才切换。

在此处查看此工作演示：http://jsfiddle.net/GaxvM/

Answer 2

您可以为每个元素分配唯一的ID，并使用document.getElementById标识这两个元素，然后折叠一个/展开另一个。

如果你按顺序编号（如div1，div2，div3等），你可以这样做：

function colexp(div_id){
     div_2_collapse = document.getElementById(div_id);
     next_div = div_id.substr(0,3) + parseInt(div_id.substr(3))+1;
     div_2_expand = document.getElementById(next_div);
     hide(div_2_collapse);
     show(div_2_expand);
}

使用JavaScript切换元素

2 个答案: