使用CSS、JavaScript、jQuery三种方式实现手风琴效果
以下是实现手风琴效果的简单示例代码。这个示例使用了HTML结构、CSS样式和jQuery来控制手风琴的打开和关闭。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Accordion</title>
<style>
.accordion {
overflow: hidden;
border: 1px solid #777;
}
.accordion-item {
padding: 10px;
background-color: #f0f0f0;
transition: background-color 0.3s;
}
.accordion-item:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.accordion-item:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.accordion-item.active {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-item active">Item 1</div>
<div class="accordion-item">Item 2</div>
<div class="accordion-item">Item 3</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('.accordion-item').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
});
</script>
</body>
</html>这个示例中的手风琴效果非常基础，只有打开和关闭的功能，没有滑动动画效果。实际应用中可以根据需要添加更多的交互细节。
评论已关闭