Question

我想通过使用Vanilla JS实现一个简单的菜单。所以我有一个工作onclick函数，我只需在点击菜单项时扭曲visibility属性。默认情况下，CSS设置在visibility:hidden

上

function getContentP() {

  var div = document.getElementById("menu1Content");

  if (div.style.visibility === "hidden") {

    div.style.visibility = "visible";

  } else {
    div.style.visibility = "hidden";
  }
};

<a href="#menu1" onclick="getContentP()">
  <h2>title</h2>
</a>

<!-- CONTENT BOX, show on clicks-->
<div id="menu1Content" style="background: #fefefe">
  Some content to make it visible
</div>

这可以按预期工作，但速度很慢，结果不佳。有什么好的建议可以改进代码吗？也许在不使用jQuery的情况下添加一些很好的转换，比如fadeIn效果？

非常感谢。

Answer 1

我不确定在这种情况下缓慢意味着什么，或者你看到的结果是什么，但总的来说，跳出来的东西就是使用onclick。当将这样的代码传递给dom元素时，运行时将基本上eval该片段由于多种原因而变坏，并且当然对于性能来说并不好（也可能永远不会被vm优化）。

element.addEventListener('click', function() { 'your stuff here' }, false); 可能会给你带来更好的表现，但如果你能说出差异，除非这被称为数千甚至数百万次，否则会感到震惊。

您也可以缓存dom元素，因为您似乎正在通过id进行查找，然后您不必每次点击该东西时都进行可能昂贵的dom搜索。

我不是css大师，但你可以在不费力气的情况下使用this获得一些很酷的东西。

Answer 2

HTML（请注意添加的id）：

<a href="#" id="menu1Toggle" style="visibility: hidden;">
  <h2>title</h2>
</a>

处理程序（请注意添加的ev和preventDefault()）：

function getContentP(ev)
{
  var div = document.getElementById("menu1Content");

  div.style.visibility = div.style.visibility === "hidden" ? "visible" : "hidden";
  ev.preventDefault();
};

将事件附加到：

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

Answer 3

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

不，这不奇怪。

style只允许您访问通过元素上的element.style.property属性直接设置的CSS值，或者通过脚本为class="hidden"赋值。

这两种情况都不是这样，你的代码中最初（编辑出来之前）的if (div.style.visibility === "hidden") {可能会将样式表中的元素可见性设置为隐藏吗？

因此，当您第一次在这里检查元素的当前可见性时，

hidden

该条件不成立，因此您将可见性设置为隐藏在else分支中 - 因此元素保持隐藏。

现在，在您第二次点击时，通过脚本设置值visible ，现在您可以将其读回来。现在，如果条件结果为true，那么您的脚本会将元素设置为div.style.visibility === "visible"。

解决这个问题的简单方法 - 改变逻辑：

检查hidden，如果这是真的，则将元素设置为visible，如果为假，则设置为div.style.visibility。

首次加载页面时，会隐藏元素（通过样式表）。由于我之前解释过，{{1}}无法读取第一次单击时的值，因此条件将为false，并且元素将变为可见。

Answer 4

如果要淡入/淡出，可以使用不透明度。只需添加一个CSS转换。一个简单的切换方法是：

{{1}}

不确定这会表现得更好/更差，但here is a Fiddle

是否有更有效的方式来显示DOM元素

4 个答案: