JavaScript 代码无效，不能 hide/show div 内容

Question

Stack Overflow 和整个 JavaScript 的新手。

我一直在尝试制作一个简单的函数，将点击时几个 div 元素的内联显示属性从 "none" 更改为 "block"。在这里尝试了类似问题的不同代码位，但没有任何运气。这是代码。很抱歉，如果我没有正确格式化它:(

代码：

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;

改为

subGroupIdStyle = document.getElementById(subGroupId).style;

Answer 2

当您将变量包装在“ ”中时，您并未传递变量

subGroupIdStyle = document.getElementById(subGroupId).style;

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

另外，不要做 see = 'block';，而是做 subGroupIdStyle.display = 'block'，其他条件也一样。

代码 see = 'block' 不起作用，因为您当时只是复制了 subGroupIdStyle.display 的值，当您更改 subGroupIdStyle.display 的值时，您可以使用它来检查值=16=] 它不会改变 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 3

最好使用单行 if 条件。变量传递是 wrong.you 应用字符串而不是传递变量。你可以这样使用

                document.getElementById(subGroupId)

并且 see = 'block'; 不会覆盖元素 style.so 你可以使用像 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';

JavaScript 代码无效，不能 hide/show div 内容

JavaScript code not working,can't hide/show div contents

html

javascript

element

show

hide