打开和关闭多个 div（几乎可以正常工作）答案

【问题标题】：Toggle multiple divs on and off (almost working)打开和关闭多个 div（几乎可以正常工作）
【发布时间】：2013-01-31 02:03:36
【问题描述】：

我有这个：

function toggleCharts() {
var x, divArray = ["item_4746983", "item_4491867"];
for (x in divArray) {
    if (x) {
        document.getElementById(divArray[x]).style.display = 'block';
    }
}

<button onClick="toggleCharts();">Charts</button>

还有这个：

#item_4746983 {
    display:none;
}

#item_4491867 {
    display:none;
}

item_4746983 & item_4491867 是我希望在您点击图表时显示或隐藏的缩略图

代码有效，当我单击按钮时它们会显示，但我无法通过再次单击它来找出隐藏它们的代码。

【问题讨论】：

这不是问题，但您应该不使用for..in 迭代这些数组

标签： javascript css hide toggle show

【解决方案1】：

不是按 id 设置样式，而是按类设置样式：

.hiddenThumbnail {
    display:none;
}

然后将hiddenThumbnail 类应用到和从这两个项目中删除。这使您的 css 代码更小，并使所有内容通常更易于维护。 See this excellent answer 获取有关如何修改类的指南。

或者，使用YUI 之类的库来执行此操作（我确信 jquery 也有类似的功能）。

【讨论】：

【解决方案2】：

检查 div 是否已显示并更改显示。以下代码应该可以工作。

var div = document.getElementById(divArray[x])
var shown = div.style.display;

if ("block" == shown) {
    div.style.display = none;
} else {
    div.style.display = block;
}

这是一个链接，显示了做你想做的各种方式： http://www.dustindiaz.com/seven-togglers/

【讨论】：

【解决方案3】：

Check the demo。

function toggleCharts() { 
    var divArray = ["item_4746983", "item_4491867"], i, ele;
    for (i=0; i < divArray.length; i++) {
        ele = document.getElementById(divArray[i]);
        ele.style.display = ele.style.display === 'block' ? 'none' : 'block';
    }
}

【讨论】：