使用JavaScript切换元素

Question

我想在单击时切换div元素(展开/折叠)。我有许多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);
}