用JavaScript切换元素

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

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

寻找这个，我得到了类似的代码想法，以收回所有股利，然后扩大当前选择只，但我想只是切换新的一个，而不是折叠所有股利和扩大选定（虽然我会如果其他方式不可能使用它）

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

来源

2011-03-05 bunkdeath

有什么反对使用jQuery的？ – Orbit 2011-03-05 22:17:29

我第二次使用[jQuery]（http://jquery.com）。它速度很快，在各种浏览器中运行良好，而且非常容易学习。 – 2011-03-05 23:04:13

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

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/

来源

2011-03-06 00:30:30

感谢这对我有用。 – bunkdeath 2011-03-06 08:16:37

@bunkdeath在Stack Overflow上，当答案帮助您解决问题时，您可以通过单击答案一侧的绿色复选标记来“接受”它。这奖励那些回答你的问题，并标记你的问题解决。 – 2011-03-07 10:16:14

您可以为每个元素分配一个唯一的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); 
}

来源

2011-03-05 22:53:41 tkone

用JavaScript切换元素

回答

相关问题