求助：实现带底部色块效果的滑动切换开关（toggle switch）

Hey there! Let's work through that toggle switch issue you're stuck on. Using two absolutely positioned <li> elements stacked on top of each other can lead to weird positioning conflicts or z-index headaches—so let's use a simpler, more reliable approach that hits all your requirements: a sliding toggle that shows a color block when active.

Here's a complete, working implementation: #

Step 1: HTML Structure

We'll use a clean container with the toggle switch (and its slider) plus the color block that will show/hide:

<div class="toggle-container">
  <div class="toggle-switch">
    <div class="toggle-slider"></div>
  </div>
  <div class="toggle-color-block"></div>
</div>

Step 2: CSS Styling

This handles the visual state, smooth transitions, and positioning—no messy absolute stacking issues here:

/* Container to group toggle and color block */
.toggle-container {
  position: relative;
  width: 60px;
  margin: 20px;
}

/* Toggle switch background */
.toggle-switch {
  width: 100%;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

/* Slider that moves left/right */
.toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
  transition: margin-left 0.3s ease; /* Smooth sliding animation */
}

/* Active state for toggle background */
.toggle-switch.active {
  background-color: #4CAF50;
}

/* Move slider right when active */
.toggle-switch.active .toggle-slider {
  margin-left: 30px; /* Matches (toggle width - slider width) */
}

/* Color block - hidden by default */
.toggle-color-block {
  width: 100%;
  height: 40px;
  background-color: #2196F3;
  margin-top: 10px;
  border-radius: 4px;
  display: none;
  transition: opacity 0.3s ease;
}

/* Show color block when toggle is active */
.toggle-color-block.active {
  display: block;
}

Step 3: JavaScript Interaction

This adds the click functionality to toggle the active state:

const toggleSwitch = document.querySelector('.toggle-switch');
const colorBlock = document.querySelector('.toggle-color-block');

toggleSwitch.addEventListener('click', () => {
  // Toggle the active class on both the switch and color block
  toggleSwitch.classList.toggle('active');
  colorBlock.classList.toggle('active');
});

Why this works better than your original approach: #

• No overlapping absolute elements: The slider lives inside the toggle switch container, so we avoid positioning conflicts or unexpected z-index issues.
• Smooth transitions: CSS transitions handle the sliding and color changes automatically, making the interaction feel polished.
• Clean state management: We use a single active class to control both the slider position and the color block visibility—easy to debug and modify later.

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