要实现手风琴效果,并且在展开时将加号图标平滑转换为减号图标,你可以使用jQuery来操作DOM元素的类和样式。以下是一个简单的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴效果</title>
<style>
.accordion {
width: 100%;
max-width: 400px;
margin: 20px auto;
}
.accordion-item {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
cursor: pointer;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.active {
max-height: 500px; /* 根据内容调整 */
}
.icon {
transform: rotate(0deg);
transition: transform 0.3s ease;
}
.icon.active {
transform: rotate(45deg);
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">
<h3>标题1</h3>
<span class="icon">+</span>
</div>
<div class="accordion-content">
内容1...
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<h3>标题2</h3>
<span class="icon">+</span>
</div>
<div class="accordion-content">
内容2...
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.accordion-header').click(function() {
var content = $(this).next('.accordion-content');
var icon = $(this).find('.icon');
if (content.hasClass('active')) {
content.removeClass('active');
icon.removeClass('active');
} else {
$('.accordion-content').removeClass('active');
$('.icon').removeClass('active');
content.addClass('active');
icon.addClass('active');
}
});
});
</script>
</body>
</html>
accordion
:手风琴容器。accordion-item
:每个手风琴项。accordion-header
:手风琴项的标题部分,包含加号图标。accordion-content
:手风琴项的内容部分。accordion-content
:默认情况下,内容部分的最大高度为0,隐藏内容。active
类:当内容展开时,添加active
类,设置最大高度,使内容显示。icon
:图标默认旋转角度为0度。icon.active
:当图标需要转换为减号时,添加active
类,旋转45度。accordion-header
时,检查内容部分是否已经有active
类。active
类,隐藏内容,并将图标旋转回0度。active
类,隐藏所有内容,然后将当前点击的内容部分添加active
类,显示内容,并将图标旋转45度。这个手风琴效果适用于需要折叠和展开内容的页面,例如:
通过这种方式,你可以实现一个简单且平滑的手风琴效果,并且在展开和折叠时动态改变图标。
领取专属 10元无门槛券
手把手带您无忧上云