一页上有多个Jquery-UI手风琴

时间:2011-09-23 00:16:28

标签: jquery html jquery-ui

我希望在同一页面上有多个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>

1 个答案:

答案 0 :(得分:3)

将您的第二个accordion()电话更改为:

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

它对我有用。 axishandlestop无效configuration options。你可能会想到draggable()

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