时间戳

首页 > 解决方案 > 如何单击一次以运行功能？

javascript - 如何单击一次以运行功能？

问题描述

我希望我的函数（dropFunction（），它使 div #dropdownList 出现）在第一次单击我的按钮（#drop-btn）时运行，但是，我必须单击它两次才能运行该函数，但只有第一次时间。第一次双击后，它会正常运行。我如何使它在第一次点击时运行，而不是第一次点击第二次？CSS：

function dropFunction() {
       var x = document.getElementById("dropdownList")
       if (x.style.display === "none") {
            x.style.display = "block"
        } else {
             x.style.display = "none"
             }
        }
#dropdownList {
                display:none;
            }
<div class="dropdown">
   <button onclick = "dropFunction()" class="drop-btn">Menu</button>
   <div id="dropdownList">
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
    </div>
</div>

标签： javascriptfunctionbuttononclickdisplay

解决方案

您必须使用window.getComputedStyle(x)从 CSS 中获取值

function dropFunction() {
   var x = document.getElementById("dropdownList")
   if (window.getComputedStyle(x).display === "none") {
       x.style.display = "block"
   } else {
       x.style.display = "none"
   }
}
#dropdownList {
    display:none;
}
<div class="dropdown">
                    <button onclick = "dropFunction()" class="drop-btn">Menu</button>
                    <div id="dropdownList">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                    </div>
                    </div>

推荐阅读