开发者问题收集

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