Javascript切换（一次一个）

我正在寻找一种简单的方法，一次只能打开一个div。我使用手风琴垂直导航，当我点击一个，它显示下面的div，当我点击另一个时，它也是一样的。当我点击不同的导航链接时，我希望先前的div再次隐藏。Javascript切换（一次一个）

这是一个用得到它的打开和关闭的JavaScript IM：

<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？

来源

2013-05-16 Evan Schmidt

你使用jQuery吗？如果是这样，这可能很容易。 –

同意，其实，它不仅会很容易做到这一点，但jQuery UI的都有自己的手风琴：http://jqueryui.com/accordion/ – Duffmaster33

与jQuery你可以'.hide（）'和'.show（）'元素，ALSE您可以轻松地在所有div的问题 – Epsil0neR

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

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

来源

2013-05-16 20:28:18

+1。一个圆滑的解决方案，而不是迭代，股利甚至没有打开或关闭在所有... hm .. –

这不起作用检查元素可见 –

@Evan：我想我可以跳过测试'opened_element'是否为'null'，但我不能。修复了代码，它现在应该可以工作。 –

给他们所有同一班。通过classname隐藏它们，并显示你通过传入的id所点击的那个。

来源

2013-05-16 20:26:56 Jason

最好的办法是：

使用CSS来隐藏所有的DIV
当你要显示一个;添加类的所谓“主动”或任何
然后应用CSS来与显示器类开放DIV：块或什么都。

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

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

jQuery Toggle Class

来源

2013-05-16 20:27:23 Yoda

既然你不使用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'; 
}

来源

2013-05-16 20:31:17 Ford

这听起来像是一种很好的方法，但是如果我已经有了用类命名的div来切换打开/关闭呢？ –

好吧，我错了，没有类名，所以我添加了一个类名作为menudiv，但是我没有成功。 –

Javascript切换（一次一个）

回答

相关问题