Element.toggle - Prototype JavaScript 框架

toggle(element) -> HTMLElement

切换 element 的可视性（在隐藏和显示间进行切换）。

样例

<div id="welcome-message"></div> 
<div id="error-message" style="display:none;"></div> 

$('welcome-message').toggle(); 
// -> HTMLElement（并隐藏 div#welcome-message）
$('error-message').toggle(); 
// -> HTMLElement（并显示 div#error-message）

注意

Element.toggle 不能 显示通过 CSS 样式表隐藏的元素。这不是 Prototype 的限制，而是与 CSS display 属性的解析过程有关。
译注：通过在 <style> 标签或外部样式表中定义 CSS 属性来隐藏元素，toggle 方法将不可用 （即该方法只针对内联的 CSS display 属性或通过 Javascript 程序实现的隐藏有效）。

<style> 
	#hidden-by-css { display: none; } 
</style>

[…] 

<div id="hidden-by-css"></div> 

$('hidden-by-css').toggle(); // 不工作 
// -> HTMLElement（div#hidden-by-css 仍然是隐藏的）

后向兼容性变更

在 Prototype 的先前版本中，可以传递任意数目的元素到 Element.toggle、Element.show 和 Element.hide 中，但在 1.5 版之后，这不再被支持。

但是你可以通过 Enumerables 实现类似的效果：

['error-message', 'welcome-message'].each(Element.toggle);
// -> ['error-message', 'welcome-message'] 
// 并切换 div#error-message 和 div#confirmation-message 的可视性。

还有更好的方法：

$('error-message', 'welcome-message').invoke('toggle');
// -> [HTMLElement, HTMLElement]（div#error-message 和 div#welcome-message） 
// 并切换 div#error-message 和 div#confirmation-message 的可视性。