小折叠三角形：如何在网页上创建可折叠部分？

Question

有些网页有一个“旋转”三角形控件，可以折叠子菜单。 我想要同样的行为，但是对于表单中的部分。

假设我有一张表格，其中包含贷款人、姓名、地址和城市信息。 我网站的一些用户将需要第二组这些字段。 我想为大多数用户隐藏额外的字段。 需要额外字段的人应该能够一键访问它们。 我该怎么做呢？

Answer 1

啊，我想你的意思是你想在你的表单上有可折叠的部分。

简而言之：

1. 将要折叠的内容放在自己的 DIV 中，首先将 CSS 属性设置为“display:none”
2. 在运行的三角形图像（或“隐藏/显示”等文本）周围包裹一个链接（A 标签）用于切换显示属性的 JavaScript。
3. 如果您希望三角形在展开/显示该部分时“转动”，您可以让 JavaScript 同时交换图像。

这是更好的解释： 如何使用Javascript和CSS创建可折叠的DIV [更新2013-01-27该文章不再在网络上提供，您可以参考此 HTML 页面的源代码，获取受本文启发的应用示例]

或者如果您用 Google 搜索“CSS 折叠部分”之类的词，您会发现许多其他教程，包括超级花哨的教程（例如 http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx）。

Answer 2

使用 JavaScript 隐藏/显示元素的最基本方法是设置元素的可见性属性。

鉴于您的示例，假设您在页面上定义了以下表单：

<form id="form1">
    <fieldset id="lenderInfo">
        <legend>Primary Lender</legend>
        <label for="lenderName">Name</label>
        <input id="lenderName" type="text" />
        <br />
        <label for="lenderAddress">Address</label>
        <input id="lenderAddress" type="text" />
    </fieldset>
    <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
    <fieldset id="secondaryLenderInfo" style="visibility:hidden;">
        <legend>Secondary Lender</legend>
        <label for="secondaryLenderName">Name</label>
        <input id="secondaryLenderName" type="text" />
        <br />
        <label for="secondaryLenderAddress">Address</label>
        <input id="secondaryLenderAddress" type="text" />
    </fieldset>
</form>

这里有两件事需要注意：

1. 第二组输入字段最初使用一些内联 css 隐藏。
2. “添加贷方”链接正在调用 JavaScript 方法，该方法将为您完成所有工作。 当您单击该链接时，它将动态设置该元素的可见性样式，使其显示在屏幕上。

showElement() 采用元素 id 作为参数，如下所示：

function showElement(strElem) {
    var oElem = document.getElementById(strElem);

    oElem.style.visibility = "visible";

    return false;
}

几乎所有 JavaScript 方法都会在幕后执行此操作，但我建议使用框架这对您隐藏了实现细节。 查看 JQuery 和 JQuery UI 以便在隐藏/显示元素时获得更加完美的过渡。

Answer 3

这是一个使用复选框的简单纯 CSS 解决方案：

.hideNext:not(:checked)+div {
  max-height: 0;
  overflow: hidden;
}

<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" />
<div>Whatever you want to hide.</div>
and then more stuff below..