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'; do subGroupIdStyle.display = 'block' ，其他條件相同。

代碼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> 

Answer 2

嘗試這個：

subGroupIdStyle = document.getElementById('subGroupId').style;

改成

subGroupIdStyle = document.getElementById(subGroupId).style;

Answer 3

if有條件，最好使用單行。變量傳遞是錯誤的。您正在應用字符串而不是傳遞變量。 你可以這樣使用

                document.getElementById(subGroupId)

並see = '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;"> &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 4

您有2個錯誤：

1-您不應該將變量subGroupId括在引號中。

2-您不能通過以下方式更改dom的樣式：

  var see = subGroupIdStyle.display;
  if (see == 'none') {
    see = 'block';
  } else {
    see = 'none';
  }

采用

subGroupIdStyle.display = 'block';