JavaScript实现产品信息点击切换显隐：点击新项时隐藏旧项

Got it, let's fix this issue where multiple product details stay visible at the same time. The core problem is that your current functions only toggle their specific info section without closing others. Here's how to fix it cleanly and cut down on repetitive code:

Step 1: Update Your HTML Buttons #

Instead of separate functions for each button, we'll use a single reusable function that takes the ID of the product info section as a parameter. Modify your button onclick attributes like this:

<ul>
  <li><button onclick="toggleProductInfo('product1info')"><h4>Knee Brace L1843</h4></button></li>
  <li><button onclick="toggleProductInfo('product2info')"><h4>Wrist Brace L3807</h4></button></li>
  <li><button onclick="toggleProductInfo('product3info')"><h4>Wrist Brace</h4></button></li>
  <li><button onclick="toggleProductInfo('product4info')"><h4>Ankle Brace L1005</h4></button></li>
  <li><button onclick="toggleProductInfo('product5info')"><h4>Back Brace L0650</h4></button></li>
</ul>

<div id="product1info" class="hidden">
  <h2>Knee Brace L1843</h2>
  <p>Product Info</p>
</div>
<div id="product2info" class="hidden">
  <h2>Wrist Brace L3807</h2>
  <p>Product Info</p>
</div>
<div id="product3info" class="hidden">
  <h2>Wrist Brace</h2>
  <p>Product Info</p>
</div>
<div id="product4info" class="hidden">
  <h2>Ankle Brace L1005</h2>
  <p>Product Info</p>
</div>
<div id="product5info" class="hidden">
  <h2>Back Brace L0650</h2>
  <p>Product Info</p>
</div>

Step 2: Replace Your JavaScript with a Single Function #

This function will first hide all product info sections, then toggle the one you clicked. We'll use CSS classes for cleaner state management (make sure you have the .hidden class defined in your CSS):

function toggleProductInfo(targetId) {
  // Grab all product info sections using their ID suffix
  const allProductInfos = document.querySelectorAll('[id$="info"]');
  
  // Hide every product info section first
  allProductInfos.forEach(info => {
    info.classList.add('hidden');
  });
  
  // Get the specific info section we want to toggle
  const targetInfo = document.getElementById(targetId);
  
  // Toggle visibility: show if hidden, hide if already visible
  if (targetInfo.classList.contains('hidden')) {
    targetInfo.classList.remove('hidden');
  } else {
    targetInfo.classList.add('hidden');
  }
}

Step 3: Ensure Your CSS Has the Hidden Class #

Add this to your stylesheet to handle the hiding logic:

.hidden {
  display: none;
}

How This Works: #

1. Hide All First: When you click any button, we immediately hide every product info section using querySelectorAll to grab all elements with IDs ending in "info".
2. Toggle Target: Then we check if the target section is hidden—if it is, we show it; if you clicked the same button twice (and it was already visible), we hide it again.
3. Less Repetition: No more 5 identical functions—one function handles all buttons, making your code easier to update later.

Alternative (If You Prefer Using Style.Display): #

If you want to stick with directly manipulating the style.display property instead of CSS classes, modify the function like this:

function toggleProductInfo(targetId) {
  const allProductInfos = document.querySelectorAll('[id$="info"]');
  allProductInfos.forEach(info => {
    info.style.display = 'none';
  });
  
  const targetInfo = document.getElementById(targetId);
  if (targetInfo.style.display === 'block') {
    targetInfo.style.display = 'none';
  } else {
    targetInfo.style.display = 'block';
  }
}

Either approach will fix your issue of multiple sections showing at once. Using CSS classes is generally better practice because it keeps styling logic in your stylesheet instead of mixing it with JavaScript.

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