Javascript 有没有更有效的方法来显示DOM元素

我想通过使用Vanilla JS实现一个简单的菜单。所以我有一个正在工作的onclick函数，在这个函数中，我只需在单击菜单项时扭曲可见性属性。CSS默认设置为“可见性：隐藏”

函数getContentP（）{ var div=document.getElementById（“menu1Content”）； 如果（div.style.visibility==“隐藏”）{ div.style.visibility=“可见”； }否则{ div.style.visibility=“隐藏”； } };

一些内容使其可见

我不确定在这种情况下缓慢意味着什么，或者你看到了什么糟糕的结果，但总的来说，我突然想到的是onclick的用法。当将这样的代码传递给dom元素时，运行时将本质上

eval

代码段，这段代码段由于许多原因是不好的，当然对性能也不是很好（也可能永远无法通过vm进行优化）

element.addEventListener（'click'，function（）{'yourstuff here'，false）
可能会给你更好的表现，但如果你能分辨出其中的差异，我会感到震惊，除非这被称为数千次或数百万次

您还可以缓存dom元素，因为您似乎正在按id进行查找，这样您就不必在每次单击该对象时都进行可能代价高昂的dom搜索

我不是css大师，但你可能不需要太多的努力就可以得到一些很酷的东西。
我不确定在这种情况下缓慢意味着什么，或者你看到了什么糟糕的结果，但总的来说，我突然想到的是onclick的用法。当将这样的代码传递给dom元素时，运行时将本质上
eval
代码段，这段代码段由于许多原因是不好的，当然对性能也不是很好（也可能永远无法通过vm进行优化）

element.addEventListener（'click'，function（）{'yourstuff here'，false）
可能会给你更好的表现，但如果你能分辨出其中的差异，我会感到震惊，除非这被称为数千次或数百万次

您还可以缓存dom元素，因为您似乎正在按id进行查找，这样您就不必在每次单击该对象时都进行可能代价高昂的dom搜索

我不是css大师，但你可能不费吹灰之力就能得到一些很酷的东西。
HTML（注意添加的
id
）：

在活动中附上：

document.getElementById("menu1Toggle").onclick = getContentP;

HTML（注意添加的
id
）：

在活动中附上：

document.getElementById("menu1Toggle").onclick = getContentP;

[评论]我通常需要在链接上点击两下才能让它首先显示出来，这真的很奇怪

不，这一点也不奇怪

element.style.property
仅允许您访问通过元素上的
style
属性直接设置的CSS值，或通过脚本为
element.style.property
赋值

这两种情况在这里都不是这样，您最初（在编辑之前）在代码中使用的
class=“hidden”
很可能会将元素的可见性设置为隐藏在样式表中，对吗

因此，当您第一次在此处检查图元的当前可见性时

if (div.style.visibility === "hidden") {

该条件不是真的，因此在else分支中将可见性设置为hidden，因此元素保持隐藏状态

现在，在第二次单击时，值
hidden
是通过脚本设置的，因此现在您可以将其读回。现在，如果条件结果为true，脚本将元素设置为可见

解决此问题的简单方法–改变逻辑：

选中
div.style.visibility==“visible”
，如果为真，则将元素设置为
hidden
，如果为假，则将元素设置为
visible

当页面第一次加载时，元素被隐藏（通过样式表）。由于我前面解释的原因，
div.style.visibility
无法在第一次单击时读取值，因此条件将为false，元素将变为可见

[评论]我通常需要在链接上点击两下才能让它首先显示出来，这真的很奇怪

不，这一点也不奇怪

element.style.property
仅允许您访问通过元素上的
style
属性直接设置的CSS值，或通过脚本为
element.style.property
赋值

这两种情况在这里都不是这样，您最初（在编辑之前）在代码中使用的
class=“hidden”
很可能会将元素的可见性设置为隐藏在样式表中，对吗

因此，当您第一次在此处检查图元的当前可见性时

if (div.style.visibility === "hidden") {

该条件不是真的，因此在else分支中将可见性设置为hidden，因此元素保持隐藏状态

现在，在第二次单击时，值
hidden
是通过脚本设置的，因此现在您可以将其读回。现在，如果条件结果为true，脚本将元素设置为可见

解决此问题的简单方法–改变逻辑：

选中
div.style.visibility==“visible”
，如果为真，则将元素设置为
hidden
，如果为假，则将元素设置为
visible

当页面第一次加载时，元素被隐藏（通过样式表）。根据我前面的解释，
div.style.visibility
无法在第一次单击时读取值，因此条件将为false，元素将变为可见。
如果要淡入/淡出，可以使用不透明度。只需添加一个CSS转换。一种简单的切换方法是：

elem.style.opacity = +!parseInt(elem.style.opacity);

不确定这是否会更好/更差，但如果您想淡出/淡出，可以使用不透明度。只需添加一个CSS转换。一种简单的切换方法是：

elem.style.opacity = +!parseInt(elem.style.opacity);

不确定这是否会表现更好/更差，但
您不需要在m中使用
class=“hidden”