javascript - 有没有更有效的方式来显示 DOM 元素

Question

我想用 Vanilla JS 实现一个简单的菜单。所以我有一个有效的 onclick 函数，我只是在点击菜单项时扭曲可见性属性。 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 就可以添加一些漂亮的过渡效果，例如淡入淡出效果？

非常感谢。

Answer 1

我不确定在这种情况下缓慢意味着什么，或者您看到的结果不佳，但总的来说，让我印象深刻的是 onclick 的使用。当将这样的代码传递给 dom 元素时，运行时本质上将 eval 代码段，由于多种原因，该代码段很糟糕，而且对于性能来说肯定不是很好(也可能永远无法被 vm 优化)。

element.addEventListener('click', function() { 'your stuff here' }, false); 可能会给你更好的性能，但如果你能分辨出差异，我会感到震惊，除非这被调用了数千次甚至数百万次。

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

我不是 CSS 大师，但您可能会用 this 得到一些很酷的东西 |无需太多努力。