如何点击时调整W3.CSS手风琴的活动标题尺寸？

Hey Anna, let's work through your accordion issues one by one. I'll break down how to get that resizable header with proper background image scaling, plus fix the :active pseudo-class behavior.

1. Core Setup: HTML Structure #

First, let's adjust your W3.CSS accordion to include a custom class for easier styling. We'll use accordion-btn for the header buttons, while keeping W3.CSS's built-in classes for collapse functionality:

<div class="w3-container">
  <button class="accordion-btn w3-btn w3-block w3-left-align">
    Accordion Header 1
  </button>
  <div class="w3-collapse w3-white">
    <div class="w3-container">
      <p>Panel content goes here...</p>
    </div>
  </div>

  <button class="accordion-btn w3-btn w3-block w3-left-align">
    Accordion Header 2
  </button>
  <div class="w3-collapse w3-white">
    <div class="w3-container">
      <p>Another panel's content...</p>
    </div>
  </div>
</div>

2. Styling: Background Image & Smooth Resizing #

Let's add CSS to handle the background image, smooth size transitions, and fix the :active state. Note that :active only applies while the button is pressed—if you want the header to stay resized while the panel is open, we'll use a custom panel-open class (handled with JS next):

.accordion-btn {
  /* Set your background image */
  background: url('your-image-path.jpg') no-repeat center center;
  /* Use `contain` to show the full image, or `cover` if you want it to fill the button (adjust based on your needs) */
  background-size: contain;
  /* Add smooth transition for size changes */
  transition: all 0.3s ease;
  /* Initial button size */
  padding: 16px;
}

/* Fix :active state (higher specificity to override W3.CSS defaults) */
.accordion-btn:active {
  /* Increase size when button is pressed */
  padding: 24px;
  /* Ensure background scales with button */
  background-size: contain;
}

/* Custom class for persistent resize when panel is open */
.accordion-btn.panel-open {
  padding: 24px;
}

3. JavaScript: Toggle Panel & Header Size #

W3.CSS has built-in collapse logic, but we'll add a custom click handler to toggle the panel-open class—this keeps the header resized as long as the panel is open:

// Get all accordion buttons
const accordionBtns = document.querySelectorAll('.accordion-btn');

accordionBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // Target the next panel element
    const panel = this.nextElementSibling;
    
    if (panel.style.display === "block") {
      // Close the panel and revert header size
      panel.style.display = "none";
      this.classList.remove('panel-open');
    } else {
      // Open the panel and enlarge header
      panel.style.display = "block";
      this.classList.add('panel-open');
    }
  });
});

Key Notes for Your Requirements: #

• Full Background Image Display: Use background-size: contain if you need the entire image visible (even if it leaves empty space). If you want the image to fill the button without distortion, use background-size: cover and match your button's aspect ratio to the image's—this ensures no cropping.
• :active vs. Persistent Resize: The :active pseudo-class only works while the mouse button is held down. The custom panel-open class keeps the header resized as long as the panel is open, which is likely what you want for an accordion.
• Overriding W3.CSS Styles: W3.CSS has default button styles, so using a specific selector like .accordion-btn:active ensures your styles take priority.

Troubleshooting the :active State #

If :active still isn't working:

• Use your browser's dev tools to inspect the button's styles when pressed—check if other styles are overriding it.
• Avoid !important unless necessary; instead, make your selector more specific (e.g., .w3-btn.accordion-btn:active).

内容的提问来源于stack exchange，提问作者Anna Marie Church