Javascript 如何单击一次以运行函数？

我希望我的函数（dropFunction（），它使div#dropdownList出现）在第一次单击我的按钮（#drop btn）时运行，但是，我必须单击两次才能运行该函数，但只能是第一次。在第一次双击之后，它将按其应该的方式运行。如何使它在第一次单击时运行，而不是第一次单击第二次？ CSS:

函数dropFunction（）{
var x=document.getElementById（“dropdownList”）
如果（x.style.display==“无”）{
x、 style.display=“块”
}否则{
x、 style.display=“无”
}
}

#下拉列表{
显示：无；
}

菜单

您必须使用

window.getComputedStyle（x）

从CSS获取值

函数dropFunction（）{
var x=document.getElementById（“dropdownList”）
if（window.getComputedStyle（x.display==“无”）{
x、 style.display=“块”
}否则{
x、 style.display=“无”
}
}

#下拉列表{
显示：无；
}

菜单

您可以使用两种解决方案

一,

如果（x.style.display==“无”）

=>

if（window.getComputedStyle（x.display==“无”）

或

二,

=>

函数dropFunction（）{
var x=document.getElementById（“dropdownList”）
if（window.getComputedStyle（x.display==“无”）{
x、 style.display=“块”
}否则{
x、 style.display=“无”
}
}

#下拉列表{
显示：无；
}

菜单

加载页面时，按钮没有应用内联样式。因此，第一次单击将添加

显示：none

。要读取CSS属性，您需要使用