用jQuery写一个手风琴效果
时间: 2023-12-29 10:49:44 浏览: 30
以下是一个简单的手风琴效果的jQuery代码:
HTML部分:
```
<div class="accordion">
<div class="accordion-header">标题1</div>
<div class="accordion-body">内容1</div>
<div class="accordion-header">标题2</div>
<div class="accordion-body">内容2</div>
<div class="accordion-header">标题3</div>
<div class="accordion-body">内容3</div>
</div>
```
CSS部分:
```
.accordion-header {
background-color: #ccc;
padding: 10px;
cursor: pointer;
}
.accordion-body {
display: none;
padding: 10px;
}
```
jQuery部分:
```
$(document).ready(function() {
$('.accordion-header').click(function() {
// 先关闭所有内容
$('.accordion-body').slideUp();
// 如果当前内容是关闭的,则打开它
if ($(this).next().css('display') == 'none') {
$(this).next().slideDown();
}
});
});
```
这个代码会在页面加载完成后,为所有的 `.accordion-header` 元素添加一个点击事件,当点击时,会先关闭所有 `.accordion-body` 元素,然后判断当前点击的元素是否已经打开,如果没有,则打开它。这样就实现了手风琴效果。