展开折叠 html 字段 Firefox答案

【问题标题】：expand collapse html field Firefox展开折叠 html 字段 Firefox
【发布时间】：2010-10-02 06:56:24
【问题描述】：

如何在 Firefox 中展开/折叠 html 字段？我从网上合并了一些 JavaScript 示例，但它们只在 IE 中工作。（我仅限于 HTML 和 JS）

欢迎提出建议。

谢谢。

是的，我想显示/隐藏 div 等。

【问题讨论】：

标签： javascript html firefox

【解决方案1】：

恐怕我没有完全理解你的问题。

首先，“html 字段”是什么意思？您的意思是在表单字段中（文本框、单选控件等？）。如果是这样，您的意思是如何动态调整它们的大小？（“展开/折叠”对我来说是模棱两可的）。

如果您的意思是要显示/隐藏 div 等，使用 css 和 javascript 会容易得多。见this example。

【讨论】：

【解决方案2】：

您可能想要做的是将元素的 css 属性 display 更改为“none”以隐藏元素并将其更改回“block”或“inline”以再次显示它。可以用javascript来完成。

如果你想要一个花哨的动画，你可以使用某种javascript library，它提供不同的effects（你可能想查看toggle）或组件（例如Accordion）。

【讨论】：

【解决方案3】：

如果您的输入字段具有 ID 属性，您可以根据需要使用 CSS 对其进行样式设置。我建议使用像 jQuery 这样的库，但我也提供了一个没有的示例：

  // hiding without jQuery
  document.getElementById('myInput').style.display = 'none'
  // showing without jQuery
  document.getElementById('myInput').style.display = 'block'

  // hiding with jQuery
  $('#myInput').hide()
  // showing with jQuery
  $('#myInput').show()

jQuery：http://jquery.com

【讨论】：

+1，尽管没有 jQuery 的示例不能在内联元素上正常工作。将“显示”设置为“块”将使它们成为块元素。