Question

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

假设我有一个有贷方，姓名，地址和城市输入的表格。我网站的一些用户将需要第二组这些字段。我想为大多数用户隐藏额外的字段。那些需要额外字段的人应该只需点击一下即可访问它们。我该怎么做？

Answer 1

啊，我认为你的意思是你希望你的表格上有可折叠的部分。

简而言之：

将要折叠的内容放在自己的DIV中，首先使用CSS属性“display：none”
围绕运行JavaScript的三角形图像（或“Hide / Show”等文本）包裹链接（A标签）以切换显示属性。
如果您希望在展开/显示该部分时“转动”三角形，您可以让JavaScript同时交换图像。

以下是一个更好的解释：How to Create a Collapsible DIV with Javascript and CSS [更新2013-01-27 该文章在网络上不再可用，您可以参考the source of this HTML page获取应用示例灵感来自这篇文章]

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

Answer 2

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

根据您的示例，您可以在页面上定义以下表单：

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

这里有两点需要注意：

第二组输入字段最初使用一点内联css隐藏。
“添加贷款人”链接正在调用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..

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

3 个答案: