javascript - Javascript切换（一次一个）

Question

我正在寻找一种简单的方法来一次只打开一个 div。我使用的是手风琴风格的垂直导航，当我单击一个时，它会显示下面的 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 吗？

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;
    };
}());

Answer 2

由于您没有使用 JQuery，我假设您想要一个 Javascript 答案，您可以通过为您的 div 提供一些独特的类名（如“menudiv”）来做到这一点，然后将以下内容附加到您的函数中：

var menu_divs = document.getElementsByClassName("menudiv");
for ( var i = 0; i < menu_divs.length; i++ ) {
    if ( menu_divs[i] != e )
        menu_divs[i].style.display = 'none';
}

Answer 3

给他们上同一堂课。按类名将它们全部隐藏，并显示您单击并传递 id 的那个。

Answer 4

最好的方法是：

• 使用 CSS 隐藏所有 DIV
• 当您想显示一个时；向您的开放 div 添加一个名为“活动”或其他的类
• 然后将 css 应用到该类，使用 display: block 或其他任何东西。

正如 Jason 在他的评论中所说，您可以使用 jQuery 来执行此操作，也可以不使用。

jQuery 将提供动画支持和更容易的类操作。

jQuery 切换类