使用JavaScript显示和隐藏类

Question

我正在尝试使用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>

Answer 1

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

1-显示变量不存在，因此JS解释器安装具有该名称的新变量；

2-您试图验证的条件始终为true，因为=是赋值符号，而不是等号（==）

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

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/

Answer 2

 if (display = "none") 

这里有两个问题。

1. 您尚未定义display 。 在其他地方使用document.getElementsByClassName('locationMenuDropdown') [0].style.display
2. =是分配，而不是比较。 这将永远是真的。 请参阅3个不同的等值项

Answer 3

您为什么不使用jQuery？ 那么您可以简单地做到这一点：

$('.locationLink').click(function(){
    $('locationMenuDropdown').toggle();
});