<!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, anddiv.accordion-content. - CSS Styling: Provides basic styling for borders, padding, hover effects, and background colors. The crucial part is
max-height: 0andoverflow: hiddenfor the closed state, and the transition for a smooth animation. - JavaScript Functionality:
- Uses
querySelectorAllto get all accordion headers. - Attaches a click event listener to each header.
- Toggles the
activeclass 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.
- Uses
- Accessibility Considerations: Added
user-select: noneto the header to prevent accidental text selection while clicking. - Clearer Comments: Added comments to explain the code's purpose.
- Adjustable Content Height: The
max-heightin the CSS is set to200px, 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.
标签：效果,item,accordion,height,header,background,active,手风琴,css From： https://www.cnblogs.com/ai888/p/18591765