jQuery Accordion插件用于创建折叠菜单。它通常与复杂的列表、指定列表或复杂的div一起使用。选项用于指定结构、激情的元素和定制
标准
标准代号如下：
<span style="color:#333333"><span style="color:#000000">jQuery </span><span style="color:#666600">（</span><span style="color:#008800">'#list1a' </span><span style="color:#666600">）。</span><span style="color:#000000">手风琴</span><span style="color:#666600">(); </span><span style="color:#000000">
jQuery </span><span style="color:#666600">（</span><span style="color:#008800">'#list1b' </span><span style="color:#666600">）。</span><span style="color:#000000">手风琴</span><span style="color:#666600">（{</span><span style="color:#000000">
自动高度</span><span style="color:#666600">：</span><span style="color:#000088">假</span><span style="color:#666600">}）；</span>
</span>导航
带有坚和附套装列表的无序列表
<span style="color:#333333"><span style="color:#000000">jQuery </span><span style="color:#666600">（</span><span style="color:#008800">'#navigation' </span><span style="color:#666600">）。</span><span style="color:#000000">手风琴</span><span style="color:#666600">（{ </span><span style="color:#000000">
active </span><span style="color:#666600">: </span><span style="color:#000088">false </span><span style="color:#666600">, </span><span style="color:#000000">
header </span><span style="color:#666600">: </span><span style="color:#008800">'.head' </span><span style="color:#666600">, </span><span style="color:#000000">
navigation </span><span style="color:#666600">: </span><span style="color:#000088">true </span><span style="color:#666600">, </span><span style="color:#000088">event </span><span style="color:#666600">: </span><span style="color:#008800">'mouseover' </span><span style="color:#666600">, </span><span style="color:#000000">
fillSpace </span><span style="color:#666600">: </span><span style="color:#000088">true </span><span style="color:#666600">, </span><span style="color:#000000">
animated </span><span style="color:#666600">: </span><span style="color:#008800">'easeslide' </span><span style="color:#666600">});</span>
</span>带选项
容器是一个定义列表，标题是dt，内容是dd。
<span style="color:#333333"><span style="color:#000000">jQuery </span><span style="color:#666600">（</span><span style="color:#008800">'#list2' </span><span style="color:#666600">）。</span><span style="color:#000000">手风琴</span><span style="color:#666600">（{ </span><span style="color:#000088">event </span><span style="color:#666600">: </span><span style="color:#008800">'mouseover' </span><span style="color:#666600">, </span><span style="color:#000000">
active </span><span style="color:#666600">: </span><span style="color:#008800">'.selected' </span><span style="color:#666600">, </span><span style="color:#000000">
selectedClass </span><span style="color:#666600">: </span><span style="color:#008800">'active' </span><span style="color:#666600">, </span><span style="color:#000000">
animated </span><span style="color:#666600">: </span><span style="color:#008800">"bounceslide" </span><span style="color:#666600">, </span><span style="color:#000000">
header </span><span style="color:#666600">: </span><span style="color:#008800">"dt" </span><span style="color:#666600">}）。</span><span style="color:#000000">bind </span><span style="color:#666600">( </span><span style="color:#008800">"change.ui-accordion" </span><span style="color:#666600">, </span><span style="color:#000088">function </span><span style="color:#666600">( </span><span style="color:#000088">event </span><span style="color:#666600">, </span><span style="color:#000000">ui </span><span style="color:#666600">) </span><span style="color:#666600">{ </span><span style="color:#000000">
jQuery </span><span style="color:#666600">( </span><span style="color:#008800">'<div>' </span><span style="color:#666600">+ </span><span style="color:#000000">ui </span><span style="color:#666600">. </span><span style="color:#000000">oldHeader </span><span style="color:#666600">.</span>
<span style="color:#666600">+ </span><span style="color:#008800">'隐藏，' </span><span style="color:#666600">+</span><span style="color:#000000">用户界面</span><span style="color:#666600">。</span><span style="color:#000000">新标题</span><span style="color:#666600">。</span><span style="color:#000000">文本</span><span style="color:#666600">() </span><span style="color:#666600">+ </span><span style="color:#008800">'显示</div>' </span><span style="color:#666600">)。</span><span style="color:#000000">appendTo </span><span style="color:#666600">( </span><span style="color:#008800">'#log' </span><span style="color:#666600">); </span><span style="color:#666600">});</span> </span>的动画。