jquery 折叠

jQuery 折叠效果实现方法

使用 jQuery 实现折叠效果可以通过操作元素的显示/隐藏状态完成。常见方法包括 slideToggle()、toggle() 或结合 CSS 类控制。

基础滑动折叠

$('#trigger').click(function() {
  $('#content').slideToggle();
});

HTML 结构示例：

<button id="trigger">Toggle</button>
<div id="content">可折叠内容...</div>

淡入淡出效果

$('.header').click(function() {
  $(this).next('.body').fadeToggle();
});

手风琴效果

$('.accordion-header').click(function() {
  $(this).next('.accordion-content').slideToggle();
  $('.accordion-content').not($(this).next()).slideUp();
});

动画速度控制

$('#toggleBtn').click(function() {
  $('#panel').slideToggle(300); // 300ms 动画时长
});

添加回调函数

$('#btn').click(function() {
  $('#box').slideToggle(function() {
    console.log('动画完成');
  });
});

注意事项

• 确保 DOM 加载完成后执行脚本，使用 $(document).ready()
• 滑动元素需设置初始 display:none 或指定高度
• 考虑添加 stop(true) 防止动画队列堆积

扩展功能

可通过添加 CSS 过渡效果增强视觉体验：

.collapsible {
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}

以上方法可根据实际需求组合使用，实现不同风格的折叠交互效果。