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

Question

我有这个：

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＆amp; item_4491867是我想在您点击图表时显示或隐藏的缩略图

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

Answer 1

而不是按ID样式，按类别设计样式：

.hiddenThumbnail {
    display:none;
}

然后在这两个项目中应用并删除hiddenThumbnail课程。这使您的css代码更小，并使一切通常更易于维护。 See this excellent answer有关如何修改类的指南。

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

Answer 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/

Answer 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';
    }
}