javascript - Style.visibility 不隐藏元素

Question

这是我在 stackoverflow 上的第一篇文章，对于“错误”，我深表歉意。

问题:我必须为 CMS 系统做前端。因此，我想要可以扩展/收缩的菜单栏，以便为其他选项和工具留出空间。承包工作正常。是的，我知道它不会向后扩展。但这不是我目前的问题。一个简单的切换就可以解决这个问题:)

这是 html 中有趣的部分。我不包括 CSS，因为我认为这里没有必要。我也没有添加 html 和 body 标签，因为我认为你们无论如何都会发现错误:)

    <container id="main">
      <div class="main-part left" id="menu-left">
        <button class="navigation-toggle bgcontain" onClick="lefttoggle()"></button>
        <ul>
          <li><div class="menuicon baseicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">base</p></li>
          <li><div class="menuicon cmsicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">cms</p></li>
          <li><div class="menuicon shopicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">shop</p></li>
          <li><div class="menuicon mamicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">mam</p></li>
          <li><div class="menuicon w2picon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">w2p</p></li>
          <li><div class="menuicon workicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">workflow</p></li>
          <li><div class="menuicon mailicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">mail</p></li>
        </ul>
      </div>
      <div class="main-part center">
        <button class="navigation-toggle bgcontain"></button>
      </div>
      <div class="main-part right">

      </div>
    </container>

    <script>

      function lefttoggle() {
        //document.getElementById('menu-left').style.width = '60px';
        //document.getElementById('menu-left').style.minWidth = '60px';
        document.getElementById('contract').style.visibility = "hidden";
      }
</script>

我希望 ID 为“contract”的 div 和 p 变得不可见，因为我想将菜单栏缩小为只有图标。

谢谢大家:)

Answer 1

使用 document.querySelectorAll 而不是 document.getElementById 否则您将只返回一项。但是，由于您在 ID 之后并且您只能拥有具有任何给定 ID 的单个元素，因此您应该为所有这些元素指定一个类并使用 document.getElementsByClassName。