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