一个页面上有多个Jquery用户界面

我希望在同一个页面上有多个Jquery UI，我认为这与将文档中的ID更改为类一样简单，但只显示第一个

//Default accordion
$( ".accordion" ).accordion({
fillSpace: true,
collapsible: true
});

//Sortable accordion
var stop = false;
$( ".accordion-sort h3" ).click(function( event ) {
if ( stop ) {
    event.stopImmediatePropagation();
    event.preventDefault();
    stop = false;
 }
});
$( ".accordion-sort" ).accordion({
 fillSpace: true,
 collapsible: true,
     header: "> div > h3",
     axis: "y",
 handle: "h3",
 stop: function() {
    stop = true;
 }
 });



<div class="accordion">
  <h3><a href="#">First header</a></h3>
  <div>First content</div>
  <h3><a href="#">Second header</a></h3>
  <div>Second content</div>
 </div>

<div class="accordion-sort">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
 </div>

//默认手风琴
$（“手风琴”）。手风琴({
fillSpace：是的，
可折叠：正确
});
//可分类手风琴
var-stop=false；
$（“.accordion sort h3”）。单击（函数（事件）{
如果（停止）{
事件。stopImmediatePropagation（）；
event.preventDefault（）；
停止=错误；
}
});
$（“.accordion排序”）.accordion({
fillSpace：是的，
可折叠的：是的，
标题：“>div>h3”，
轴：“y”，
手柄：“h3”，
停止：函数（）{
停止=真；
}
});
第一内容
第二内容
第一内容
第二内容

将第二次调用更改为：

$(".accordion-sort").accordion({
     fillSpace: true,
     collapsible: true,
     header: "> div > h3"
 });

这对我很有用<代码>轴、

手柄

和

停止

无效。你可能在想

---

（使用jQuery 1.6.4和jQuery UI 1.8.16进行了测试）

ok是的，我刚刚在文档中注意到这些选项是用于.sortable（）函数的