Javascript 它没有'；第一次点击不起作用，但第二次点击起作用。如何解决这个问题？

所以我有这样的功能，第一次点击不起作用，但第二次点击起作用。如何解决这个问题

let coll=document.getElementsByClassName（'collection'）；
让dis=document.getElementsByClassName（'display'）；
document.getElementById（“menu-btn1”）.addEventListener（“单击”，函数（）{
如果（coll[0].style.display==“无”）
{
coll[0]。style.display='block'；
dis[0]。style.display='none'；
}
其他的
{
coll[0]。style.display='none'；
}
});
.collection{
宽度：80vh；
高度：85vh；
背景颜色：蓝色；
显示：无；
网格柱：4/10；
网格行：2/9；
自我辩护：中心；
z指数：3；
}
我建议清理您的代码，并使用类切换来隐藏和显示它

您的CSS：

.collection {
    width: 80vh;
    height: 85vh;
    background-color: blue;

    grid-column: 4 / 10;
    grid-row: 2 / 9;
    justify-self: center;
    z-index: 3;
}
.hidden {
    display: none;
}

您的HTML：

<div class="collection hidden"></div>
<div class"display"></div> <!--I was assuming your .display element was visible at first and you wanted to hide it afterwards-->

这样您的代码就更干净了，因为您为
显示创建了一个单独的类：none当您将“display:none；”应用于该类的所有元素时，您避免了CSS中选择器样式层次结构的棘手问题，但只尝试更改该类中某个元素的显示
我认为您共享的代码不完整，我在html菜单-btn1和显示中看不到这些类，例如，您可以将代码上载到github或您喜欢的任何其他工具，因为
coll[0]。style.display='block'搜索内联样式，然后添加
显示：无
在css类上，如果要检查样式，则需要添加以下内联样式：

<div class="collection" style="display:none;"></div>

.collection{
宽度：80vh；
高度：85vh；
背景颜色：蓝色；
网格柱：4/10；
网格行：2/9；
自我辩护：中心；
z指数：3；
}

切换
您尚未为
菜单-btn1
或
显示
元素添加HTML。
文档。getElementsByClassName（'display'）
无法正常工作，非常感谢！！