JavaScript 代码不起作用，无法隐藏/显示 div 内容

Question

Stack Overflow 和 JavaScript 整体上都是新手。

我一直在尝试创建一个简单的函数，将单击时的几个 div 元素的内联显示属性从“无”更改为“阻止”。尝试了这里类似问题的不同代码，但没有一个运气好。这是代码。很抱歉，如果我的格式不正确:(

代码:

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;">
    &nbsp;&nbsp; + <a href="#" class="submenu">Intel</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">AMD</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">ARM</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">nVidia</a>
  </div>

  <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p>
  <div id="subgroup2" style="display:none;">
    &nbsp;&nbsp; + <a href="#" class="submenu">Asus</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Asrock</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Foxconn</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Gigabyte</a>
  </div>

  <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p>
  <div id="subgroup3" style="display:none;">
    &nbsp;&nbsp; + <a href="#" class="submenu">Samsung</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">A-Data</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Corsair</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Kingston</a>
  </div>

  <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p>
  <div id="subgroup4" style="display:none;">
    &nbsp;&nbsp; + <a href="#" class="submenu">Western Digital</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Seagate</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Toshiba</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Hitachi</a>
  </div>

</div>

Answer 1

当您将变量包装在“”中时，您没有传递该变量

subGroupIdStyle = document.getElementById(subGroupId).style;

删除 subGroupId 中的 ''，这样您实际上就传递了变量字符串。

另外，不要执行 see = 'block'; 而是执行 subGroupIdStyle.display = 'block'，对于 else 条件也是如此。

代码 see = 'block' 不起作用，因为您当时只是复制了 subGroupIdStyle.display 的值，而当您更改时，您可以使用它来检查该值see 的值不会更改 subGroupIdStyle.display 的值。您应该完全避免使用 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;">
      &nbsp;&nbsp; + <a href="#" class="submenu">Intel</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">AMD</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">ARM</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">nVidia</a>
    </div>

  <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p>	
    <div id="subgroup2" style="display:none;">
      &nbsp;&nbsp; + <a href="#" class="submenu">Asus</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">Asrock</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">Foxconn</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">Gigabyte</a>
    </div>	

  <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p>	
    <div id="subgroup3" style="display:none;">
      &nbsp;&nbsp; + <a href="#" class="submenu">Samsung</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">A-Data</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">Corsair</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">Kingston</a>
    </div>	

  <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p>	
    <div id="subgroup4" style="display:none;">
      &nbsp;&nbsp; + <a href="#" class="submenu">Western Digital</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">Seagate</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">Toshiba</a> <br>
      &nbsp;&nbsp; + <a href="#" class="submenu">Hitachi</a>
			</div>	
				
	</div>