javascript - 打开和关闭多个 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&item_4491867是我希望在您单击图表时显示或隐藏的缩略图

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

Answer 1

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

.hiddenThumbnail {
    display:none;
}

hiddenThumbnail然后对这两个项目应用和删除类。这使您的 css 代码更小，并使一切通常更易于维护。有关如何修改类的指南，请参阅这个出色的答案。

或者，使用像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

检查演示。

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