JavaScript - 通过更改类名折叠元素

Question

我制作了一个由九个盒子组成的网格。单击这九个框中的任何一个时，单击的那个框会占据整个网格的空间，并在其中显示一些信息。现在，我还在每个网格的右上角做了一个十字，点击后，网格将折叠到其原始大小并占据其先前的位置。我已经为它编写了纯 JavaScript 代码，在浏览器中检查代码表明代码没有任何问题。但是，我的十字按钮似乎不起作用。下面，我提到了我写的JS函数。这是它的 jsFiddle:https://jsfiddle.net/ag_dhruv/wx7en2kx/
这是包含我的页面的文件夹:goo.gl/Qiafc7

function expand (x) {
var tester = x.className.substr(5,7);
if(tester != "ex"){
x.className = x.className+"ex";
var cross = x.getElementsByClassName('cross');
for (var i = 0; i < cross.length; i++) {
    cross[i].className = "crossshown";
};
var icon = x.getElementsByClassName('boxfortitle');
for (var j = 0; j < icon.length; j++) {
    icon[j].className = "boxfortitlebig";
};
var info = x.getElementsByClassName('info');
for (var k = 0; k < info.length; k++) {
    info[k].className = "infoshown";
};
x.id="opened";
}
}

function collapse (y) {
var classOfParent = y.parentNode.className;
var newClassName = classOfParent.substr(0,5);
y.parentNode.className = newClassName;
}

Answer 1

找到你的错误。 expand(this) 绑定(bind)到whole 框，因此当您单击 x 时，它会调用 collapse()，然后调用 expand()，不会产生净变化。

你的代码到处都是；清理应该可以使此错误易于修复。