HTML Javascript切換'select'的可見性即下拉？

Question

我創建了一個下拉列表和標簽並將它們包圍在div中，但是，當我在下面的函數中獲得div時，它不會隱藏/取消隱藏標簽和下拉列表？

function ToggleDiv(DivID)
{
    if (document.getElementById(DivID).style.display == "none")
    {
        document.getElementById(DivID).style.display = "block";
    }
    else
    {
        document.getElementById(DivID).style.display = "none";
    }
}

我已將默認可見性設置為隱藏在css中，因為我希望隱藏元素，然后在單擊復選框時顯示。 這是問題嗎？ css總是隱藏元素嗎？

#unis
{
    visibility:hidden;
}

<div class='row'>
    <label id='Recruitmentlbl' for='Recruitment'>Recruitment?:</label>
    <input id='Recruitment' name='Recruitment' class='formcbx' type='checkbox' onclick=ToggleDiv("unis")<br />
</div>

<div class='row'>
    <div id = "unis">
    <label id='Universitylbl' for='University'>University institution:</label>
    <select name="uni">
        <option value="uni1">uni1</option>
        <option value="uni2">uni2</option>
        <option value="uni3">uni3</option>
        <option value="uni4">uni4</option>
        <option value="uni5">uni5</option>
    </select><br />
    </div>
</div>

但它不起作用？

Answer 1

問題是JS無法真正讀取CSS中設置的style.display。 因此，當您對“none”進行測試時，可能返回的實際值可能是"none"或"" （根本沒有字符串）。

這很煩人，但是像這樣對正面進行測試：

function ToggleDiv(DivID)
{
    if (document.getElementById(DivID).style.display != "block")
    {
        document.getElementById(DivID).style.display = "block";
    }
    else
    {
        document.getElementById(DivID).style.display = "none";
    }
}

此外， visibility和display不是一回事。 Visibility設置是否可以看到對象並display是否具有“布局”。 display:none;的div display:none; 在頁面上不占用空間，但是具有visibility:hidden;的div visibility:hidden; 確實。 因此，即使代碼切換display值，您也需要切換visibility值。

Answer 2

如果你想從一些打字中保存自己（它也更快）：

function ToggleDiv(DivID) {
    var style = document.getElementById(DivID).style;
    style.display = (style.display != "none") ? "none" : "block";
}​

HTML

<p onclick="ToggleDiv('box')">toggle box</p>
<div id="box" style="display:none"></div>

關於可見性與顯示問題。 如果從用戶的角度來看，差異很簡單。

• display: none看起來元素已被刪除
• visibility:hidden的元素已被隱藏

您可以在此處看到演示： 可見性與顯示

重點是兩者不可互換 ：設置一個不會影響另一個。