jQuery手风琴

创建可折叠的内容面板，点击标题展开/收起对应内容，节省页面空间。 · 难度：入门 · +15XP

jQuery手风琴

手风琴（Accordion）是一种垂直折叠组件，点击标题展开内容区域，同时收起其他区域，常用于FAQ或菜单。

原理

每个手风琴项包含标题和内容面板。点击标题时，使用.slideToggle()切换当前面板，并.slideUp()其他面板。

示例代码

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

参数对比

练习提示

在右侧代码中，添加一个选项，使得点击时只切换当前面板，不收起其他面板（即手风琴模式改为独立模式）。