jQuery实现横版手风琴效果
以下是一个简单的jQuery实现横版手风琴效果的示例代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横版手风琴效果</title>
<style>
.accordion {
width: 300px;
margin: 50px auto;
}
.accordion-item {
background-color: #f9f9f9;
color: #444;
cursor: pointer;
padding: 18px;
border: 1px solid #ccc;
text-align: left;
margin-top: -1px;
}
.accordion-item:first-child {
margin-top: 0;
}
.accordion-content {
padding: 0 18px;
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">标题1</div>
<div class="accordion-content">
内容1...
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">标题2</div>
<div class="accordion-content">
内容2...
</div>
</div>
<!-- 更多的.accordion-item -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.accordion-item').click(function() {
$(this).find('.accordion-content').slideToggle('fast');
});
});
</script>
</body>
</html>这段代码中，我们定义了一个基本的手风琴结构，并通过jQuery实现了点击标题时内容区域的展开和折叠。.slideToggle('fast')函数用于在当前内容区域可见时隐藏它，不可见时显示它，'fast'参数意味着动画执行速度很快。
评论已关闭