jquery - 一页上有多个 Jquery-UI Accords

Question

我想在同一页面上有多个 Jquery-UI Accordion ，我认为这就像将文档中的 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>

Answer 1

将第二个 accordion() 调用更改为:

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

这对我有用。 axis、handle 和 stop 无效 configuration options 。您可能会想到draggable()

(使用 jQuery 1.6.4 和 jQuery UI 1.8.16 进行测试)