修改手风琴组件：将:hover替换为:active，实现点击后保持DIV激活

Got it, let's fix both of your requests: keeping the accordion panel active after clicking the image, and replacing the :hover pseudo-class with a persistent active state.

Key Changes Made: #

1. Replaced :hover with a persistent .active class: The native :active pseudo-class only applies while the element is being clicked (it stops when you release), so we use a custom .active class to maintain the expanded state. We'll use JavaScript to toggle this class on click.
2. Added click-based state management: This ensures that when you click an accordion item, it stays expanded until you click another item (or itself, if you enable toggle behavior).

Full Modified Code #

HTML

<h1>Accordion</h1>
<div class="accordion">
  <ul>
    <li>
      <div class="image">
        <img src="https://placehold.it/600x250/3498db/ffffff&text=Slide+1" alt="Slide 1">
      </div>
      <div class="content">
        <h2>Slide 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget consectetur tempor, nisl nunc egestas odio, ac scelerisque nisl nunc eget nisl.</p>
      </div>
    </li>
    <li>
      <div class="image">
        <img src="https://placehold.it/600x250/e74c3c/ffffff&text=Slide+2" alt="Slide 2">
      </div>
      <div class="content">
        <h2>Slide 2</h2>
        <p>Nullam nec nisl eget nisl consectetur tempor. Sed euismod, nisl eget consectetur tempor, nisl nunc egestas odio, ac scelerisque nisl nunc eget nisl.</p>
      </div>
    </li>
    <li>
      <div class="image">
        <img src="https://placehold.it/600x250/2ecc71/ffffff&text=Slide+3" alt="Slide 3">
      </div>
      <div class="content">
        <h2>Slide 3</h2>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed euismod, nisl eget consectetur tempor, nisl nunc egestas odio, ac scelerisque nisl nunc eget nisl.</p>
      </div>
    </li>
    <li>
      <div class="image">
        <img src="https://placehold.it/600x250/f39c12/ffffff&text=Slide+4" alt="Slide 4">
      </div>
      <div class="content">
        <h2>Slide 4</h2>
        <p>Donec vitae dolor eget nisl consectetur tempor. Sed euismod, nisl eget consectetur tempor, nisl nunc egestas odio, ac scelerisque nisl nunc eget nisl.</p>
      </div>
    </li>
  </ul>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

h1 {
  text-align: center;
  font-family: Montserrat,sans-serif;
  color: #333;
}

.accordion {
  width: 100%;
  max-width: 1080px;
  height: 250px;
  overflow: hidden;
  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 25%;
  height: 250px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

.accordion ul li div img {
  width: 100%;
  display: block;
}

.accordion ul li .content {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -250px;
  background: rgba(0,0,0,0.7);
  transition: all 500ms ease;
}

.accordion ul li .content h2 {
  font-family: Montserrat,sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  color: #fff;
  padding: 15px;
  margin: 0;
  text-align: left;
}

.accordion ul li .content p {
  font-family: 'Open Sans',sans-serif;
  font-size: 13px;
  color: #fff;
  padding: 15px;
  margin: 0;
  text-align: left;
}

/* Replace :hover with .active class for persistent expanded state */
.accordion ul li.active {
  width: 60%;
}

.accordion ul li.active .content {
  bottom: 0;
}

/* Optional: Add visual feedback while clicking the item */
.accordion ul li:active {
  opacity: 0.9;
}

JavaScript

const accordionItems = document.querySelectorAll('.accordion ul li');

// Set up click handlers for each accordion item
accordionItems.forEach(item => {
  item.addEventListener('click', () => {
    // Remove active class from all items first
    accordionItems.forEach(i => i.classList.remove('active'));
    // Add active class to the clicked item to keep it expanded
    item.classList.add('active');
  });
});

// Optional: Uncomment below to allow toggling the same item on/off
// accordionItems.forEach(item => {
//   item.addEventListener('click', () => {
//     const isAlreadyActive = item.classList.contains('active');
//     accordionItems.forEach(i => i.classList.remove('active'));
//     if (!isAlreadyActive) {
//       item.classList.add('active');
//     }
//   });
// });

How It Works: #

• Persistent Active State: When you click an accordion item, the JavaScript adds the .active class to it, which triggers the expanded CSS styles. Clicking another item removes the .active class from the previous one and applies it to the new selection.
• Replaced :hover: The original hover-based expansion is replaced with the .active class, so the panel stays open until you interact with another item. The optional :active pseudo-class adds a subtle opacity change while clicking for immediate feedback.

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