如何使用显示内容的相同按钮隐藏内容？答案

【问题标题】：How to hide content with the same button that shows it?如何使用显示内容的相同按钮隐藏内容？
【发布时间】：2011-07-08 21:32:39
【问题描述】：

我正在使用

<a href="#" onclick="document.getElementById('history').style.display='block';return(false);">

当我点击某个按钮时显示标有“历史”的内容。如何设置它以使相同的按钮隐藏内容？我尝试再次添加相同的代码并将“get”替换为“hide”和“return(false)”以返回(true)，因为这对我来说似乎是合乎逻辑的，但是当我点击按钮时，现在什么也没有发生（也许我不明白一些事情)。

让相同的按钮显示和隐藏内容的最简单方法是什么？

【问题讨论】：

标签： html

【解决方案1】：

如果您不能使用 jQuery（如前所述），您可以使用纯 JavaScript 执行以下操作：

 var element = document.getElementById("someElement");
 if(element.style.display == "none") element.style.display = "block";
 else element.style.display = "none";

将它放在一个函数中，然后将该函数传递给元素的onclick 属性。

【讨论】：

@Tocco - 有时（在我看来，无论如何，特别是如果 jQuery 没有在其他地方使用）简单的纯 JS 解决方案比 jQuery 更好，仅仅是因为速度。例如，查看切换功能的 jQuery 源代码，与我的答案中的 3 行相比：github.com/jquery/jquery/blob/master/src/effects.js

【解决方案2】：

我建议使用 JQuery。这样的事情很容易使用它。在 JQuery 中很简单，如下一行。

$("#history").toggle();

【讨论】：

我不确定 JQuery 是否适用于移动网站；你知道它是否兼容？
查看 JQuery 移动浏览器兼容性。 stackoverflow.com/questions/2233292/… ... 还有一个移动版的 JQuery，你应该看看。 ^^