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

Question

某些网页具有可折叠子菜单的“转向”三角形控件。 我想要相同的行为，但要针对表单中的部分。

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

Answer 1

嗯，我想您的意思是您想在表单上包含可折叠的部分。

简而言之：

1. 首先将要折叠的内容放在自己的DIV中，首先使用CSS属性“ display：none”
2. 在运行JavaScript的三角形图像（或类似“隐藏/显示”之类的文本）周围环绕一个链接（A标签），该链接运行JavaScript以切换显示属性。
3. 如果要在展开/显示该部分时使三角形“转”，则可以让JavaScript同时换出图像。

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

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

Answer 2

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

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

<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 only解决方案：

 .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..