使用 JavaScript 單擊時顯示/隱藏 Div

Question

不能使用 jQuery 或 CSS（僅限）。 我有：

 function handleDropDown (elementId) { document.getElementById('languages').style.display = "block"; }

 .flag-icon-wrapper { margin-right: 20px; padding-top: 5px; }.flex { display: flex; }.flag-icon { width: 50px; }.is-hidden-initially { display: none; }

 <span class="flag-icon-wrapper flex" onClick='handleDropDown()'> <img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" /> </span> <div class="languages is-hidden-initially"> <ul> <li>Spanish</li> <li>French</li> <li>Russian</li> </ul> </div>

這個想法是，當您單擊美國國旗時，它應該顯示其他語言的列表（最終可供選擇）。 最終，當您單擊另一種語言時，我想在flag-icon-wrapper跨度中顯示與該語言相關聯的標志，但現在，我只想在您單擊時顯示或隱藏languages div旗幟。

此時，我收到Uncaught TypeError: Cannot read property 'style' of null" - 為什么？我通過 ID languages獲取元素以將其顯示為block - 那么為什么該部分不起作用？謝謝

編輯現在通過將 class 更改為 html 中的 ID 來修復它：

<span class="flag-icon-wrapper flex" onClick='handleDropDown()'>
<img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" />
</span>

<div id="languages" class="is-hidden-initially">
<ul>
<li>Spanish</li>
<li>French</li>
<li>Russian</li>
</ul>
</div>

但是現在我們如何在顯示和隱藏 div 之間切換呢？

Answer 1

您正在嘗試通過id訪問元素，但尚未為該元素指定id 。

你可以這樣做：

 const divHide = document.getElementById("div-hide"); function handleHide(){ divHide.style.display = "none"; } function handleShow(){ divHide.style.display = "block"; }

 <div id="div-hide"> Hello </div> <button onclick="handleHide()"> click to hide </button> <button onclick="handleShow()"> click to show </button>

或者像這樣：

 const divHide = document.getElementById("div-hide"); const btnHide = document.getElementById("btn-hide"); const btnShow = document.getElementById("btn-show"); btnHide.addEventListener("click", () => { divHide.style.display = "none"; }); btnShow.addEventListener("click", () => { divHide.style.display = "block"; });

 <div id="div-hide"> Hello </div> <button id="btn-hide"> click to hide </button> <button id="btn-show"> click to show </button>

如果要添加一些切換邏輯，可以執行以下操作：

 const divHide = document.getElementById("div-hide"); function handleToggle(){ divHide.style.display === "none"? divHide.style.display = "block": divHide.style.display = "none"; }

 <div id="div-hide"> Hello </div> <button onclick="handleToggle()"> click to toggle </button>

Answer 2

您想使用getElementById進行訪問，但您的代碼包含languages為 class，而不是 id。 在下面更正了您的代碼，

 function handleDropDown(elementId) { const element = document.getElementById('languages'); if (element.style.display === "block") { element.style.display = "none"; } else { element.style.display = "block"; } }

 .flag-icon-wrapper { margin-right: 20px; padding-top: 5px; }.flex { display: flex; }.flag-icon { width: 50px; }.is-hidden-initially { display: none; }

 <span class="flag-icon-wrapper flex" onClick='handleDropDown()'> <img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" /> </span> <div id="languages" class="is-hidden-initially"> <ul> <li>Spanish</li> <li>French</li> <li>Russian</li> </ul> </div>

Answer 3

我相信我看到你在嘗試什么。 我會更加慎重，不會使用唯一的 id 來激增，我會使用數據屬性集來切換和設置使用 CSS 的可見性。

我添加了第二個標志只是為了說明使用數據屬性集的相同代碼適用於兩者。 請注意，我從元素中傳遞this ，但您也可以使用事件處理程序而不是將該調用嵌入元素中，從而使代碼與標記分開。 （第二個例子）

 function handleDropDown(me) { // get and use the selector from the data attribute let toggles = ["hidden", "showem"]; let tarsel = me.dataset.clickTarget; let tar = document.querySelector(tarsel); tar.dataset.hideme = tar.dataset.hideme == toggles[0]? toggles[1]: toggles[0]; }

 .flag-icon-wrapper { margin-right: 20px; padding-top: 5px; }.flex { display: flex; }.flag-icon { width: 50px; } [data-hideme="hidden"] { display: none; } [data-hideme="showem"] { border: solid lime 1px; ; }

 <span class="flag-icon-wrapper flex" onClick='handleDropDown(this)' data-click-target=".mytarget.languages"> <img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" /> </span> <span class="flag-icon-wrapper flex" onClick='handleDropDown(this)' data-click-target=".newtarget.languages"> <img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" /> </span> <div class="newtarget languages" data-hideme="hidden"> <ul> <li>Spanish</li> <li>French</li> <li>Russian</li> </ul> </div> <div class="mytarget languages" data-hideme="hidden"> <ul> <li>Beer</li> <li>Wine</li> <li>Cheese</li> </ul> </div>

第二個示例使用來自代碼實例化而不是在標記中的事件處理程序

 let wappers = document.querySelectorAll(".flag-icon-wrapper"); wappers.forEach(el => el.addEventListener("click", function(event) { // get and use the selector from the data attribute let toggles = ["hidden", "showem"]; let tarsel = this.dataset.clickTarget; let tar = document.querySelector(tarsel); tar.dataset.hideme = tar.dataset.hideme == toggles[0]? toggles[1]: toggles[0]; }));

 .flag-icon-wrapper { margin-right: 20px; padding-top: 5px; }.flex { display: flex; }.flag-icon { width: 50px; } [data-hideme="hidden"] { display: none; } [data-hideme="showem"] { border: solid lime 1px; ; }

 <span class="flag-icon-wrapper flex" data-click-target=".mytarget.languages"> <img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" /> </span> <span class="flag-icon-wrapper flex" data-click-target=".newtarget.languages"> <img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" /> </span> <div class="newtarget languages" data-hideme="hidden"> <ul> <li>Spanish</li> <li>French</li> <li>Russian</li> </ul> </div> <div class="mytarget languages" data-hideme="hidden"> <ul> <li>Beer</li> <li>Wine</li> <li>Cheese</li> </ul> </div>

Answer 4

<span class="flag-icon-wrapper flex" onclick="handleDropDown()">
        <img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" />
        </span>
        
        <div class="languages is-hidden-initially" id="languages">
        <ul>
        <li>Spanish</li>
        <li>French</li>
        <li>Russian</li>
        </ul>
        </div>

js

function handleDropDown() {
    var x = document.getElementById("languages");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

希望它會起作用。

Answer 5

您可以簡單地向 classList 添加一個切換： element.classList.toggle("is-hidden-initially");

 function handleDropDown(elementId) { const element = document.getElementById('languages'); element.classList.toggle("is-hidden-initially"); }

 .flag-icon-wrapper { margin-right: 20px; padding-top: 5px; }.flex { display: flex; }.flag-icon { width: 50px; }.is-hidden-initially { display: none; }

 <span class="flag-icon-wrapper flex" onClick='handleDropDown()'> <img class="flag-icon" src="https://i.imgur.com/3DpAxu5.png" /> </span> <div id="languages" class="is-hidden-initially"> <ul> <li>Spanish</li> <li>French</li> <li>Russian</li> </ul> </div>