Javascript 切换(一次一个)

Question

我正在寻找一种简单的方法来一次只打开一个 div。我使用 Accordion 风格的垂直导航，当我单击一个时，它会显示下面的 div，当我单击另一个时，它会执行相同的操作。当我单击不同的导航链接时，我希望前一个 div 再次隐藏。

这是我用来打开和关闭它的 JavaScript:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
//-->
</script>

我还可以添加其他内容，以便在打开另一个 div 时关闭该 div 吗？

Answer 1

一个非常简单的方法是只跟踪以前打开的元素:

(function() { // using an IIFE to prevent polluting the global namespace
    var opened_element = null;

    window.toggle_visibility = function(id) {
       var e = document.getElementById(id);
       if (opened_element && opened_element !== e) {
           opened_element.style.display = 'none';
       }
       if(e.style.display == 'block') {
          e.style.display = 'none';
       }
       else {
          e.style.display = 'block';
       }
       opened_element = e;
    };
}());