如何切换开/关？（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>

- Dario Sanchez Martinez

---

一个CSS类会更容易。dropdown.classList.toggle("enabled") - epascarello

啊，我懂了！谢谢，已经检查过了！ - Dario Sanchez Martinez

Answer 1

您在使用样式对象时不够一致，有时直接在下拉菜单中检查和设置显示，而有时则是通过样式对象来操作。

您还使用了“=”代替“==”进行比较，“=”用于赋值而非比较。

因此，最小的更改应该是：

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。

- T.J. Crowder

---

非常感谢，那个似乎有效！是的，我会尝试添加类。但这只是一个测试，看看我能不能理解它。最终，我想添加一个类，触发CSS动画。我正在尝试制作这个网站：https://www.blizzard.com/en-us/ - Dario Sanchez Martinez

Answer 2

你可以使用 classList.toggle 函数。当类可见时，您可以显示标签，否则您可以隐藏它。

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

- Prasanna Brabourame

---

你是指我在我的回答中所做的吗？ :-) - T.J. Crowder

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>

- Mukund