求助：实现点击橙色盒子切换指定主盒子显示/隐藏的JS功能

Hey there! Let's fix that toggle functionality for your boxes. You already got the image preview working, so we're halfway there—let's knock this out too. Here's a step-by-step solution tailored to your needs:

First, make sure your elements have identifiable classes so JavaScript can target them easily. We'll add a shared class (hidden-box) to the 3 boxes that should start hidden, and an ID to the orange toggle box:

<!-- Default visible main boxes -->
<div class="main-box">Main Box 1</div>
<div class="main-box">Main Box 2</div>
<div class="main-box">Main Box 3</div>

<!-- Boxes that start hidden -->
<div class="main-box hidden-box">Main Box 4</div>
<div class="main-box hidden-box">Main Box 5</div>
<div class="main-box hidden-box">Main Box 6</div>

<!-- Orange toggle box -->
<div id="orange-toggle" style="background: orange; padding: 1rem; cursor: pointer;">Toggle Hidden Boxes</div>

Use CSS to hide the hidden-box elements initially. This is cleaner than setting styles directly in JS:

/* Hide boxes by default */
.hidden-box {
  display: none;
}

/* Optional: Add basic styling for clarity */
.main-box {
  width: 120px;
  height: 120px;
  border: 1px solid #ddd;
  margin: 0.5rem;
  padding: 1rem;
  display: inline-block;
}

Now we'll add a click event listener to the orange box that toggles the visibility of the hidden boxes. The classList.toggle() method is perfect here—it adds or removes the hidden-box class automatically:

// Grab the orange toggle element
const toggleButton = document.getElementById('orange-toggle');
// Grab all boxes that start hidden
const hiddenBoxes = document.querySelectorAll('.hidden-box');

// Add click event to the toggle button
toggleButton.addEventListener('click', () => {
  // Toggle each hidden box's visibility
  hiddenBoxes.forEach(box => {
    box.classList.toggle('hidden-box');
  });
  
  // Optional: Update the button text to reflect the current state
  toggleButton.textContent = toggleButton.textContent === 'Toggle Hidden Boxes' 
    ? 'Hide Extra Boxes' 
    : 'Toggle Hidden Boxes';
});

Common Reasons Your Previous Attempt Might Have Failed #

• Incorrect element selection: Double-check that your IDs/class names match between HTML and JS (typos are super common!).
• CSS specificity issues: If other styles were overriding your display: none rule, the boxes might not have hidden initially. Using a dedicated hidden-box class avoids this.
• Event listener not attached properly: Make sure your JS runs after the DOM is loaded—either put your script at the end of the <body> tag, or wrap it in DOMContentLoaded.

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