好的,所以我正在尝试创建一个交互式菜单。 现在我真的很难让 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/
最佳答案
错误在第一行。当您打开错误控制台时,将出现一条错误消息。
将行 a.document.getElementsByClassName('sub-button');
更改为 a.getElementsByClassName('sub-button');
。
第二个错误是将 onclick="openMe(self);
更改为 onclick="openMe(this);
。
关于JavaScript 尝试访问 div 的子元素然后更改 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28109451/