小折疊三角形：如何在網頁上創建可折疊部分？

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