使用 JavaScript 显示和隐藏类

debugcn 发表于 Dev

汤姆

我正在尝试使用 JavaScript 显示和隐藏 div 类，以便当有人点击按钮时，隐藏部分会根据状态/样式显示/隐藏。我已经设法显示隐藏部分，但我无法再次隐藏它。这是我使用的代码是一个名为 locationMenu.js 的文件。

const locationLink = document.getElementsByClassName('locationLink')[0];

locationLink.addEventListener('click', () => {
if (display = "none") {document.getElementsByClassName('locationMenuDropdown')
[0].style.display = 'block';}
else {document.getElementsByClassName('locationMenuDropdown')[0].style.display 
= 'none';}
});

这是（简化的）HTML

<div class="header">
  <div class="locationMenuDropdown">
    <h3>Choose a Location</h3>
    <div class="locationButtons">
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Kettering</div>
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Northampton</div>
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Wellingborough</div>
    </div>
  </div>

  <div id="locationMenu"><h4 class="locationLink"><i class="fas fa-map-marker-alt"></i> Locations</h4>
  </div>

<script type="text/javascript" src="locationMenu.js"></script>

戴维德·戈齐

问题出在 if 条件下，您将显示设置为“无”。这里的问题是2：

1- 显示变量不存在，因此 JS 解释器使用该名称创建一个新变量；

2-您尝试验证的条件始终为真，因为 = 是赋值符号而不是相等 ( == )

我认为完成工作的最佳选择是

const locationLink = document.getElementsByClassName('locationLink')[0];

var divToFade = document.getElementsByClassName('locationMenuDropdown')[0];

locationLink.addEventListener('click', () => {
if (divToFade.style.display == "none") 
{
divToFade.style.display = 'block';
}
else 
{
divToFade.style.display = 'none';
}
});

见 JsFiddle：https ://jsfiddle.net/ja3xjw6c/6/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。