JavaScript 尝试访问 div 的子元素然后更改 css

Question

好的，所以我正在尝试创建一个交互式菜单。现在我真的很难让 JavaScript 访问 div 的子节点并更改特定的 css 元素。

html代码如下:

<div id="navbar">
        Control panel
        <div class="button" onclick="openMe(self);">
            Users
            <div class="sub-button">
                Profile
            </div>
            <div class="sub-button">
                Ban
            </div>
        </div>

        <div class="button">
            Roles
            <div class="sub-button">
                Profile
            </div>
            <div class="sub-button">
                Ban
            </div>
        </div>
    </div>

JavaScript 是:

function openMe(a)
{
        child = a.document.getElementsByClassName('sub-button');
        console.log("a is "+a);
        console.log("child is "+$(child).get());
        console.log(self);
        for (i = 0; i < child.length; i++){
            //
            console.log("Key "+i+" is "+child[i]);
            console.log("Display for "+i+" is "+child[i].style.display);
            if (child[i].style.display == "" || child[i].style.display == "none"){
                child[i].style.display = "block";
            } else {
                child[i].style.display = "none";
            }
        }
    }

在 css 中子按钮是隐藏的。现在我一直在尝试谷歌搜索，但我什至没有找到任何接近的东西。

如果我按下按钮，我怎样才能让按钮内的子按钮改变 css 元素？

克，天使

编辑:jsfiddle http://jsfiddle.net/r7tzr6dm/

Answer 1

错误在第一行。当您打开错误控制台时，将出现一条错误消息。将行 a.document.getElementsByClassName('sub-button'); 更改为 a.getElementsByClassName('sub-button');。

第二个错误是将 onclick="openMe(self); 更改为 onclick="openMe(this);。