javascript - 如何打开/关闭？ (JavaScript)

Question

我正在尝试不使用 jQuery 的 JS。但到目前为止，要困难得多。

我正在尝试打开和关闭功能。

这是函数:

function toggleDropdown(){

   var dropdown = document.getElementById('games-dropdown')

   if (dropdown.display = "none"){
    dropdown.style.display = 'block';
   } else {
    dropdown.display = "none";
   }
}

我在这里调用函数:

<li class="dropdown"><a onclick="toggleDropdown()">GAMES</a></li>

Answer 1

您在使用 style 方面并不一致对象，您正在检查并有时设置 display直接在 dropdown .

您还使用了 =而不是 ==进行比较。 =用于赋值，而不是比较。

所以最小的变化是:

function toggleDropdown(){

   var dropdown = document.getElementById('games-dropdown')

   // ----------vvvvv    
   if (dropdown.style.display == "none"){
   // ------------------------^^
     dropdown.style.display = 'block';
   } else {
     dropdown.style.display = "none";
   // --------^^^^^^
   }
}

但是，我不会使用style根本。我会使用一个隐藏元素的类，您可以添加和删除该元素:

.hidden {
    display: none;
}

和

function toggleDropdown(){
   document.getElementById('games-dropdown').classList.toggle("hidden");
}

例子:

function toggleDropdown(){
   document.getElementById('games-dropdown').classList.toggle("hidden");
}

.hidden {
      display: none;
  }

<li class="dropdown"><a onclick="toggleDropdown()">GAMES</a></li>
<div id="games-dropdown">
games-dropdown
</div>

您还可以通过接受要显示/隐藏的元素的选择器来使您的函数更通用:

function toggleDropdown(selector) {
   document.querySelector(selector).classList.toggle("hidden");
}

.hidden {
      display: none;
  }

<ul>
  <li class="dropdown"><a onclick="toggleDropdown('#games-dropdown')">GAMES</a></li>
  <li class="dropdown"><a onclick="toggleDropdown('#games-dropdown2')">GAMES2</a></li>
</ul>
<div id="games-dropdown">
games-dropdown
</div>
<div id="games-dropdown2">
games-dropdown 2
</div>

我用了querySelector而不是 getElementById所以你可以使用其他形式来识别元素，但当然使用 getElementById如果您愿意。