如何用HTML/CSS通过cb1/cb2复选框控制divMenu3的显示隐藏？

Great question! Let’s break down both the CSS-only approach (if your DOM structure allows it) and the reliable JavaScript method, since you’re curious about alternatives to JS.

CSS-Only Solution (Limited to Specific DOM Structures) #

If your checkboxes and divMenu3 are sibling elements under the same parent, and divMenu3 comes after both checkboxes in the HTML, you can use CSS’s :checked pseudo-class combined with the general sibling combinator (~). This works entirely without JavaScript.

Here’s a working example:

<!-- HTML -->
<input type="checkbox" id="cb1">
<label for="cb1">Toggle with CB1</label>

<input type="checkbox" id="cb2">
<label for="cb2">Toggle with CB2</label>

<div id="divMenu3">
  This is your menu content!
</div>

/* CSS */
#divMenu3 {
  display: none; /* Hide the menu by default */
}

/* Show the menu if either checkbox is checked */
#cb1:checked ~ #divMenu3,
#cb2:checked ~ #divMenu3 {
  display: block;
}

Key Limitations for CSS Method: #

• This only works if cb1, cb2, and divMenu3 share the same parent element.
• divMenu3 must appear after the checkboxes in the HTML (CSS can’t select elements that come before the trigger in the DOM).
• If either checkbox is checked, the div will show. If both are unchecked, it hides.

JavaScript Solution (Flexible for Any DOM Structure) #

If your DOM structure doesn’t fit the CSS-only requirements (e.g., checkboxes are in a different section of the page than divMenu3), JavaScript is the way to go. It’s straightforward and works regardless of where your elements are placed.

Here’s a clean, maintainable implementation:

<!-- HTML (can be anywhere in your document) -->
<input type="checkbox" id="cb1">
<label for="cb1">Toggle with CB1</label>

<input type="checkbox" id="cb2">
<label for="cb2">Toggle with CB2</label>

<div id="divMenu3">
  Your menu content here!
</div>

<script>
// Grab references to your elements
const cb1 = document.getElementById('cb1');
const cb2 = document.getElementById('cb2');
const divMenu3 = document.getElementById('divMenu3');

// Function to update the menu's visibility
function updateMenu() {
  // Show the div if either checkbox is checked; hide otherwise
  divMenu3.style.display = (cb1.checked || cb2.checked) ? 'block' : 'none';
}

// Attach event listeners to both checkboxes
cb1.addEventListener('change', updateMenu);
cb2.addEventListener('change', updateMenu);

// Set initial visibility when the page loads
updateMenu();
</script>

Bonus: Use Class Toggles for Better Styling #

Instead of directly manipulating the display property, you can toggle CSS classes to add smooth transitions or custom styling:

/* CSS */
.menu-hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.menu-visible {
  opacity: 1;
  height: auto;
}

Adjust the JavaScript function to use class toggles:

function updateMenu() {
  const isVisible = cb1.checked || cb2.checked;
  divMenu3.classList.toggle('menu-visible', isVisible);
  divMenu3.classList.toggle('menu-hidden', !isVisible);
}

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