使用 JavaScript 点击显示/隐藏 Div
2021-05-14
5070
无法使用 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
- 那么为什么该部分不起作用?谢谢
编辑 现在已通过将类更改为 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 之间切换?
3个回答
您正尝试通过
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>
axtck
2021-05-14
您想使用
getElementById
进行访问,但您的代码包含
languages
作为类,而不是 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>
Rohit Khandelwal
2021-05-14
<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";
}
}
希望它能起作用。
MANISH KANVADIYA
2021-05-14