如何打开/关闭？ (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 对象方面不一致，您正在检查并有时直接在 dropdown 上设置 display。

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

所以最小的变化是：

function toggleDropdown(){

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

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

但是，我根本不会用style。我会使用 class 来隐藏您添加和删除的元素：

.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>

您还可以通过接受 show/hide:

元素的选择器来使您的函数更通用

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功能。当 class 可见时，您可以显示标签，如果不可见，您可以隐藏它。

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>

如何打开/关闭？ (Javascript)

How to toggle on / off? (Javascript)

javascript

dom

onclick

toggle