JavaScript代码不起作用，无法隐藏/显示div内容
[英]JavaScript code not working,can't hide/show div contents
问题描述
New to Stack Overflow and JavaScript as a whole. 
Stack Overflow和整个JavaScript的新增功能。
I've been trying to make a simple function that changes the inline display attribute of a few div elements on click from "none" to "block". 我一直在尝试制作一个简单的函数，将单击时将一些div元素的内联显示属性从“无”更改为“阻止”。 Tried different bits of code from similar questions on here,but no luck with any of them. 在这里从类似的问题中尝试了不同的代码位，但是其中的任何一个都没有运气。 Here's the code. 这是代码。 Am sorry if I didn't format it correctly :( 很抱歉，如果我没有正确格式化:(
Code: 码：
function toggleMenuItem(subGroupId) { subGroupIdStyle = document.getElementById('subGroupId').style; var see = subGroupIdStyle.display; if (see == 'none') { see = 'block'; } else { see = 'none'; } };
<div id="content"> <p id="title">Computer <br>components</p> <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> <div id="subgroup1" style="display:none;"> + <a href="#" class="submenu">Intel</a> <br> + <a href="#" class="submenu">AMD</a> <br> + <a href="#" class="submenu">ARM</a> <br> + <a href="#" class="submenu">nVidia</a> </div> <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> <div id="subgroup2" style="display:none;"> + <a href="#" class="submenu">Asus</a> <br> + <a href="#" class="submenu">Asrock</a> <br> + <a href="#" class="submenu">Foxconn</a> <br> + <a href="#" class="submenu">Gigabyte</a> </div> <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> <div id="subgroup3" style="display:none;"> + <a href="#" class="submenu">Samsung</a> <br> + <a href="#" class="submenu">A-Data</a> <br> + <a href="#" class="submenu">Corsair</a> <br> + <a href="#" class="submenu">Kingston</a> </div> <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> <div id="subgroup4" style="display:none;"> + <a href="#" class="submenu">Western Digital</a> <br> + <a href="#" class="submenu">Seagate</a> <br> + <a href="#" class="submenu">Toshiba</a> <br> + <a href="#" class="submenu">Hitachi</a> </div> </div>
4 个解决方案
解决方案1
1 已采纳 2017-05-05 06:44:46
You're not passing the variable when you wrap it in ' ' 将变量包装在“”中时，您没有传递变量
subGroupIdStyle = document.getElementById(subGroupId).style;
remove '' in subGroupId, that way you actually pass the variable string. 删除subGroupId中的''，那样您就可以实际传递变量字符串。
Also, instead of doing see = 'block'; 另外，不要执行see = 'block'; do subGroupIdStyle.display = 'block' , same for else condition. do subGroupIdStyle.display = 'block' ，其他条件相同。
The code see = 'block' is not working because, you just copied the value of the subGroupIdStyle.display at the time, while you can use it to check the value, when you change the value of see it is not going to change the value of subGroupIdStyle.display . 代码see = 'block'不起作用，因为您当时只是复制了subGroupIdStyle.display的值，而您可以使用它来检查值，当您更改see的值时，它将不会更改subGroupIdStyle.display值。 You should avoid using see altogether and use subGroupIdStyle.display in the place. 您应该避免使用see干脆用subGroupIdStyle.display的地方。
function toggleMenuItem(subGroupId) { subGroupIdStyle = document.getElementById(subGroupId).style; var see = subGroupIdStyle.display; if (see == 'none') { subGroupIdStyle.display = 'block'; } else { subGroupIdStyle.display = 'none'; } };
<div id="content"> <p id="title">Computer <br>components</p> <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> <div id="subgroup1" style="display:none;"> + <a href="#" class="submenu">Intel</a> <br> + <a href="#" class="submenu">AMD</a> <br> + <a href="#" class="submenu">ARM</a> <br> + <a href="#" class="submenu">nVidia</a> </div> <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> <div id="subgroup2" style="display:none;"> + <a href="#" class="submenu">Asus</a> <br> + <a href="#" class="submenu">Asrock</a> <br> + <a href="#" class="submenu">Foxconn</a> <br> + <a href="#" class="submenu">Gigabyte</a> </div> <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> <div id="subgroup3" style="display:none;"> + <a href="#" class="submenu">Samsung</a> <br> + <a href="#" class="submenu">A-Data</a> <br> + <a href="#" class="submenu">Corsair</a> <br> + <a href="#" class="submenu">Kingston</a> </div> <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> <div id="subgroup4" style="display:none;"> + <a href="#" class="submenu">Western Digital</a> <br> + <a href="#" class="submenu">Seagate</a> <br> + <a href="#" class="submenu">Toshiba</a> <br> + <a href="#" class="submenu">Hitachi</a> </div> </div>
解决方案2
0 2017-05-05 06:41:10
try this: 尝试这个：
subGroupIdStyle = document.getElementById('subGroupId').style;
change to 改成
subGroupIdStyle = document.getElementById(subGroupId).style;
解决方案3
0 2017-05-05 06:49:11
Better use single line if condition .Variable passing was wrong.you are applying string instead of passing variable. if有条件，最好使用单行。变量传递是错误的。您正在应用字符串而不是传递变量。 you could use like this 你可以这样使用
document.getElementById(subGroupId)
And see = 'block'; 并see = 'block'; is not overwrite the element style.so you could use full of the style like variable.style.display="block" 不会覆盖元素样式。因此您可以使用完整的样式，例如variable.style.display="block"
function toggleMenuItem(subGroupId) { var subGroupIdStyle = document.getElementById(subGroupId); subGroupIdStyle.style.display = (subGroupIdStyle.style.display =='none')?'block':'none'; }
<div id="content"> <p id="title">Computer <br>components</p> <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> <div id="subgroup1" style="display:none;"> + <a href="#" class="submenu">Intel</a> <br> + <a href="#" class="submenu">AMD</a> <br> + <a href="#" class="submenu">ARM</a> <br> + <a href="#" class="submenu">nVidia</a> </div> <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> <div id="subgroup2" style="display:none;"> + <a href="#" class="submenu">Asus</a> <br> + <a href="#" class="submenu">Asrock</a> <br> + <a href="#" class="submenu">Foxconn</a> <br> + <a href="#" class="submenu">Gigabyte</a> </div> <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> <div id="subgroup3" style="display:none;"> + <a href="#" class="submenu">Samsung</a> <br> + <a href="#" class="submenu">A-Data</a> <br> + <a href="#" class="submenu">Corsair</a> <br> + <a href="#" class="submenu">Kingston</a> </div> <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> <div id="subgroup4" style="display:none;"> + <a href="#" class="submenu">Western Digital</a> <br> + <a href="#" class="submenu">Seagate</a> <br> + <a href="#" class="submenu">Toshiba</a> <br> + <a href="#" class="submenu">Hitachi</a> </div> </div>
解决方案4
0 2017-05-05 06:53:20
You have 2 mistake: 您有2个错误：
1- You shouldn't wrap the variable subGroupId in quote. 1-您不应该将变量subGroupId括在引号中。
2- You can not change style of dom by: 2-您不能通过以下方式更改dom的样式：
var see = subGroupIdStyle.display;
if (see == 'none') {
see = 'block';
} else {
see = 'none';
}
use 采用
subGroupIdStyle.display = 'block';
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.