如何将相同的.onclick函数应用于多个元素？

Question

我有5个div，每个div需要执行相同的功能：

-折叠所有div -展开父级div

每个元素共享一个类。

当我使用getElementsByClass时，它返回一个 5件物品的清单。

我尝试在列表上使用for循环，但这不起作用。

HTML：

<div class="parent">
    <div class="child"> x <div>
<div>
<div class="parent">
    <div class="child"> x <div>
<div>
<div class="parent">
    <div class="child"> x <div>
<div>

JS：

var child = getElementsByClassName("child");
var parent = getElementsByClassName("parent");
var i;
for(i=0; i<child.length; i++){
    i.onClick = function(){
        parent.style.height = "0";
        i.parentElement.style.height = "100px;
};