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>

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

感谢大家：）

Answer 1

使用document.querySelectorAll代替document.getElementById，否则您只会返回一个项目。但是，既然您已经在ID之后，并且您只能拥有一个具有任何给定ID的元素，那么您应该为所有这些元素提供一个类并使用document.getElementsByClassName。

Answer 2

您不能在页面上拥有多个具有相同ID的元素。因此，将它们更改为类并使用getElementsByClassName函数

＆＃13;

<script>
function lefttoggle() {

    console.log("here")
    var elems = document.getElementsByClassName('contract')
 for (var i=0; i< elems.length; i++) {
elems[i].parentElement.style.visibility = "hidden"; 
}

  }
  </script>


<container id="main">
  <div class="main-part left" id="menu-left">
    <button class="navigation-toggle bgcontain" onclick="lefttoggle()">T</button>
    <ul>
      <li><div class="menuicon baseicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">base</p></li>
      <li><div class="menuicon cmsicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">cms</p></li>
      <li><div class="menuicon shopicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">shop</p></li>
      <li><div class="menuicon mamicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">mam</p></li>
      <li><div class="menuicon w2picon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">w2p</p></li>
      <li><div class="menuicon workicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">workflow</p></li>
      <li><div class="menuicon mailicon bgcontain"></div><div class="ul-vspacer 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>

＆＃13;

Answer 3

getElementById因为只返回一个DOM元素而无法工作，我还没有尝试使用具有相同ID的多个元素的文档，但可能会返回第一个元素。您可以使用querySelectorAll并使用带有＃前缀的元素ID来使代码正常工作 - 即#contract，或者更方便地将合约添加到元素的class属性并使用getElementByClassName。这两个函数都返回一个DOM元素数组，因此链接style.visibility直接无法工作。您必须遍历结果并在循环内设置样式。这是一个可以帮助你的小提琴：

https://jsfiddle.net/yan0zvb7/

JScript style.visibility无法正常工作

3 个答案: