使用css实现手风琴的效果 

<!DOCTYPE html>
<html>
<head>
<title>Accordion Example</title>
<style>
.accordion {
  border: 1px solid #ddd;
  width: 100%;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  padding: 10px 15px;
  cursor: pointer;
  background-color: #f5f5f5;
  user-select: none; /* Prevent text selection */
}

.accordion-header:hover {
  background-color: #e9e9e9;
}

.accordion-content {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: white;
}

.accordion-item.active .accordion-content {
  max-height: 200px; /* Adjust as needed */
}

.accordion-item.active .accordion-header {
  background-color: #ddd;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Item 1</div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Item 2</div>
    <div class="accordion-content">
      <p>Nulla mauris. Ut id nisl quis enim dignissim fringilla.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Item 3</div>
    <div class="accordion-content">
      <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
    </div>
  </div>
</div>

<script>
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const accordionItem = header.parentNode;
    accordionItem.classList.toggle('active');

    // Close other accordion items if needed (optional single-open behavior)
    if (accordionItem.classList.contains('active')) {
      accordionHeaders.forEach(otherHeader => {
        if (otherHeader !== header && otherHeader.parentNode.classList.contains('active')) {
          otherHeader.parentNode.classList.remove('active');
        }
      });
    }
  });
});
</script>

</body>
</html>

Explanation and Key Improvements:

  • HTML Structure: Uses a clear and semantic structure with div.accordion, div.accordion-item, div.accordion-header, and div.accordion-content.
  • CSS Styling: Provides basic styling for borders, padding, hover effects, and background colors. The crucial part is max-height: 0 and overflow: hidden for the closed state, and the transition for a smooth animation.
  • JavaScript Functionality:
    • Uses querySelectorAll to get all accordion headers.
    • Attaches a click event listener to each header.
    • Toggles the active class on the clicked item's parent (.accordion-item).
    • Optional Single-Open Behavior: The included JavaScript code now has a section that, when an accordion item is opened, closes any other open accordion items. This creates the more typical single-open accordion behavior. Remove this section if you want multiple items open at the same time.
  • Accessibility Considerations: Added user-select: none to the header to prevent accidental text selection while clicking.
  • Clearer Comments: Added comments to explain the code's purpose.
  • Adjustable Content Height: The max-height in the CSS is set to 200px, but you can adjust this value as needed to fit your content.

This improved example provides a functional and more robust accordion implementation. You can further customize the styling and behavior to match your specific design requirements. Remember to test this code in different browsers for compatibility.

posted @ 2024-12-07 09:25  王铁柱6  阅读(28)  评论(0)    收藏  举报