如何打开/关闭？（Javascript）

我正在试用没有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>

游戏

---

您在使用

样式

对象方面不一致，您直接在

下拉菜单上检查并有时设置
显示

您还使用了
=
而不是
=
进行比较<代码>=

用于分配，而不是比较

因此，最小的变化是：

function toggleDropdown(){

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

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

然而，我根本不会使用

样式。我将使用一个隐藏元素的类，您可以添加和删除该元素：

.hidden {
    display: none;
}

及

例如：


函数切换下拉列表（）{
document.getElementById（'games-dropdown'）.classList.toggle（“hidden”）；
}
。隐藏{
显示：无；
}
游戏
游戏下拉列表

您可以使用

classList.toggle

功能。当类可见时，可以显示标记，如果不可见，可以隐藏标记

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

---

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

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

您的下拉列表
游戏
函数toggleDropdown（）{
var dropdown=document.getElementById（'games-dropdown'）
如果（dropdown.style.display==“无”）{
dropdown.style.display='block'；
}否则{
dropdown.style.display=“无”；
}
}

CSS类会简单得多

dropdown.classList.toggle（“enabled”）

如果下面的任何答案回答了您的问题，即堆栈溢出的工作方式，您可以通过单击旁边的复选标记来“接受”答案。但前提是你的问题得到了回答；如果没有，考虑在问题上增加更多的细节。啊，我明白了！谢谢，检查过了！你是说像我在电影里做的那样？：-）非常感谢，这个似乎有用！是的，我也会尝试添加这个类。但这是一个测试，看看我是否能理解它。最后，我想添加一个类来触发CSS动画。我正在尝试创建此网站：

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