Style.visibility无法隐藏目标元素的技术问题求助

Hey there! Welcome to Stack Overflow—nice first question, don’t stress about any small oversights 😊 Let’s break down what’s going wrong and how to fix it.

The Core Problem #

In HTML, IDs must be unique across your entire page. You’ve used id="contract" on multiple <div> and <p> elements, but document.getElementById('contract') only ever returns the first element with that ID. That’s why only one of your elements is hiding, while the rest stay visible.

The Fix #

Instead of using an ID, switch to a class for all the elements you want to hide. Classes are designed specifically for grouping multiple elements together. Here’s how to adjust your code:

Step 1: Update Your HTML

Change every id="contract" to class="contract":

<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 contract"></div><p class="contract">base</p></li>
      <li><div class="menuicon cmsicon bgcontain"></div><div class="ul-vspacer contract"></div><p class="contract">cms</p></li>
      <li><div class="menuicon shopicon bgcontain"></div><div class="ul-vspacer contract"></div><p class="contract">shop</p></li>
      <li><div class="menuicon mamicon bgcontain"></div><div class="ul-vspacer contract"></div><p class="contract">mam</p></li>
      <li><div class="menuicon w2picon bgcontain"></div><div class="ul-vspacer contract"></div><p class="contract">w2p</p></li>
      <li><div class="menuicon workicon bgcontain"></div><div class="ul-vspacer contract"></div><p class="contract">workflow</p></li>
      <li><div class="menuicon mailicon bgcontain"></div><div class="ul-vspacer contract"></div><p class="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>

Step 2: Update Your JavaScript

Use document.querySelectorAll('.contract') to grab all elements with the contract class, then loop through them to set their visibility (or display if you want them to stop taking up space entirely):

function lefttoggle() {
  // Optional: Adjust menu width if needed
  // document.getElementById('menu-left').style.width = '60px';
  // document.getElementById('menu-left').style.minWidth = '60px';

  // Get all elements with class "contract"
  const contractElements = document.querySelectorAll('.contract');
  // Loop through each element and hide it
  contractElements.forEach(element => {
    // Use visibility:hidden if you want the element to still take up space
    element.style.visibility = "hidden";
    // Or use display:none if you want to remove it from the layout entirely
    // element.style.display = "none";
  });
}

Bonus: A More Maintainable Approach #

For better scalability down the line, consider using CSS classes to toggle visibility instead of directly manipulating styles in JS. Here’s how:

1. Add this CSS to your stylesheet:

.contract.hidden {
  visibility: hidden;
  /* Or display: none; if you prefer */
}

2. Update your JS to toggle the class instead:

function lefttoggle() {
  const contractElements = document.querySelectorAll('.contract');
  contractElements.forEach(element => {
    element.classList.toggle('hidden');
  });
}

This way, you can easily adjust the hiding behavior later just by modifying your CSS, without touching the JavaScript.

Hope this fixes your menu issue—let me know if you run into any other snags!

内容的提问来源于stack exchange，提问作者jam0