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)绑定到整个框，因此，当您单击x时，它将调用collapse（），然后再调用expand（），导致没有净变化。

您的代码无处不在； 清理应该使此错误易于修复。

Answer 2

在你collapse()函数的事件通过DOM冒泡导致您的expand()函数后，您可以直接调用collapse()函数运行完毕。 因为onclick在子元素上调用，然后onclick在父元素上调用。 因此，它立即再次打开。

而不是传递的this通过对collapse()传递事件对象。

例如collapse(event);

事件对象上有一个名为stopPropagation（）的函数，如果您在函数底部调用它，它将停止这种情况的发生。

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

当我对此进行测试时，在鼠标事件中还需要执行一些其他视觉操作。 但是希望这会有所帮助。

附加信息：事件冒泡和传播
这是我的理解。 冒泡和传播是同一回事。 这与事件如何在DOM中移动有关。 想想像水下气泡之类的事件，无论您要深入到表面的深度如何。

<div onclick="onParentClick(event);">
    <img src="img.jpg" alt="logo" onclick="onChildClick(event);" />
</div>

如果单击Child img则将其称为onclick ，一旦该方法完成，事件（水下气泡）必须使其到达body元素（曲面） ，因此将调用其自身与body元素之间的所有onclick ，直到到达顶端。 这只会影响父母和孩子的兄弟姐妹事件，不会被调用。 如果仅单击“父” div则它会遵循相同的过程，但不会调用“子” div onclick因为气泡只会向上浮动。

每个Event实例都有一个称为bubbles的属性，它是一个布尔值，它告诉您事件是否要在DOM树上继续。

您可以通过三种主要方式与事件实例进行交互，以使其执行其默认行为以外的其他操作。

event.stopPropagation(); 停止使该特定事件的DOM冒泡的事件。 例如，停止onclick而不是mouseup传播。

event.stopImmediatePropagation(); 停止事件冒泡和该元素上的任何其他事件侦听器。 例如，调用此方法将在onclick之后停止mouseup的触发。

event.preventDefault(); 停止默认浏览器功能。 例如，如果您想停止浏览器对<a>标记的反应，并对其进行onclick 。

Answer 3

每次调用展开时都会调用展开。 您还需要为所有折叠方法传递“ this”

编辑您的扩展并将其添加到开头

if(x.getAttribute("id")!="opened"){
    ...
}

这需要进一步的逻辑编辑。 或使用onclick="collapse(this); event.stopPropagation();" 防止触发父母事件

Answer 4

cross元素上的click事件将传播到父元素，并在该事件中触发click处理程序（扩展）。 解决该问题的一种方法是停止事件传播。

<div class="cross" onclick="collapse(this); event.stopPropagation();" >