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

给他们所有同一个班级。通过类名隐藏它们，并显示您通过id时单击的那个。

Answer 3

最好的方法是：

使用CSS隐藏所有DIV
当你想要展示一个;添加一个你的开放div的类叫做“active”或者其他什么
然后将css应用于那个类有display：block或者是什么。

正如杰森在评论中所说，你可以用jQuery做到这一点，或者你可以不用。

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

jQuery Toggle Class

Answer 4

由于你没有使用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';
}

Javascript切换（一次一个）

4 个答案: