<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery滑动手风琴内容切换特效</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.accordion {
width: 300px;
margin: 50px auto;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.accordion-header {
background-color: #f7f7f7;
padding: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
position: relative;
}
.accordion-header::after {
content: '+';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.accordion-content {
padding: 10px;
display: none;
background-color: white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-header">Header 1</div>
<div class="accordion-content">
<p>Content for header 1.</p>
</div>
<div class="accordion-header">Header 2</div>
<div class="accordion-content">
<p>Content for header 2.</p>
</div>
<div class="accordion-header">Header 3</div>
<div class="accordion-content">
<p>Content for header 3.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('.accordion-header').each(function() {
$(this).on('click', function() {
$(this).next('.accordion-content').slideToggle('fast', function() {
var toggleState = $(this).is(':visible') ? '-' : '+';
$(this).prev('.accordion-header').find('::after').content(toggleSta
评论已关闭