⚡ 编程实验室🏗️ HTML🎨 CSS⚡ JavaScript🐍 Python🗄️ SQL☕ Java⚛️ React💚 Vue🟢 Node.js⚙️ C语言🐘 PHP🐹 Go🔷 TypeScript🐬 MySQL🔧 C++🎯 C#🦀 Rust🅱️ Bootstrap💡 jQuery🎸 Django🍃 MongoDB👗 Sass🎪 Kotlin📊 R语言📋 XML📊 Excel🐘 PostgreSQL🐳 Docker🅰️ Angular🎮 游戏🏠 网站首页

jQuery手风琴

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

jQuery手风琴

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

原理

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

示例代码

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

参数对比

方法效果
slideUp()向上收起
slideDown()向下展开
slideToggle()切换展开/收起

练习提示

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

Ctrl+Enter
🚀 升级VIP
解锁全部课程+AI助手

🏆 学习排行

加载中...

📊 统计

📖 55 篇
0 完成
🔥 0