精心挑選的12款優秀的基於jQuery的手風琴效果外掛程式和教程

當你想在有限的頁面空間內展示多個內容片段的時候，手風琴（Accordion）效果就顯得非常有用，它可以協助你以對使用者非常友好的方式實現多個內容片段之間的切換。藉助流行的 jQuery 架構，只需很少的代碼就可以實現精美的手風琴效果，協助你的網站吸引更多使用者的眼球。

Elegant Accordion with jQuery and CSS3

首先推薦的這款外掛程式是基於 jQuery 和 CSS3 實現的優雅的滑鼠移至上方手風琴效果。

製作教程　　線上示範

Vertical Sliding Accordion with jQuery

基於 jQuery 實現的垂直滑動的精美手風琴效果，可以通過箭頭按鈕進行切換。

製作教程　　線上示範

Grid Accordion with jQuery

這個是很特別的網格（Grid）手風琴效果，融合了水平和垂直兩種滑動方式。

製作教程　　線上示範

Making accordion menu using jquery

非常簡單的一個 jQuery 手風琴菜單效果，是學習手風琴效果的基本樣本。

製作教程　　線上示範

Horizontal JavaScript Accordion

這是另外一款水平的手風琴效果，可以用於實現文本、圖片等內容的平滑切換。

製作教程　　線上示範

A Simple and Beautiful jQuery Accordion Tutorial

這款外掛程式非常簡單，但是效果很不錯，有非常細的製作過程供學習。

製作教程　　線上示範

Horizontal jQuery Accordion

這個是在實際使用中的 jQuery 手風琴效果，實現基於點擊模式的水平切換。

製作教程　　線上示範

Simple Accordion with CSS and jQuery

效果不錯的手風琴效果，可以用於實現內容片段間的平滑切換。

製作教程　　線上示範

Create Accordions with CSS3, HTML5 and jQuery

結合 HTML5、CSS3 和 jQuery 實現的簡潔風格的手風琴效果。

製作教程　　線上示範

Making a Fresh Content Accordion

基於 jQuery 實現的非常時尚的手風琴效果，可以在項目中實際應用，也是學習的好例子。

製作教程　　線上示範

jQuery Accordion Image Slider

常用的手風琴效果，水平方向的圖片滑動，可以應用於實際項目中。

製作教程　　線上示範

Flexible Slide-to-top Accordion

非常靈活的滑動至頂部手風琴效果，適合內容比較多的應用場合。

製作教程　　線上示範