2024年2月7日发(作者：)

jq手风琴的几种写法

在jq中实现手风琴效果的方式有多种。以下是几种常用的写法：

1. 使用`slideToggle()`方法:

```javascript

$(".accordion-heading").click(function(){

$(this).next(".accordion-content").slideToggle();

$(".accordion-content").not($(this).next()).slideUp();

});

```

2. 使用`animate()`方法:

```javascript

$(".accordion-heading").click(function(){

if($(this).next(".accordion-content").is(":visible")){

$(this).next(".accordion-content").animate({

height: 'hide'

});

}else{

$(".accordion-content").animate({

height: 'hide'

});

$(this).next(".accordion-content").animate({

height: 'show'

});

}

});

```

3. 使用`toggleClass()`方法:

```javascript

$(".accordion-heading").click(function(){

$(".accordion-content").slideUp();

$(this).next(".accordion-content").slideToggle().toggleClass("active");

$(".accordion-heading").not(this).removeClass("active");

});

```

以上是几种常见的手风琴效果的 jq 写法，具体可以根据需求和设计指导选择合适的方法实现。