如何开启/关闭？ （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。

Answer 2

您可以使用classList.toggle功能。当班级可见时，您可以显示标签，否则可以将其隐藏。

var dropdown = document.getElementById('games-dropdown').classList.toggle('someClass')

Answer 3

您正在分配值，而不是将值与样式元素进行比较

 <div id='games-dropdown'> Your Dropdown </div>

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

    <script>
    function toggleDropdown(){

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

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