0

我希望有类似于 JQuery UI 中的可排序手风琴的东西，它会自动排序，即活动的手风琴面板（打开的手风琴面板 - 最后一个点击）自动移动到手风琴的顶部。

有任何想法吗？

这是 JQ UI 页面的链接：http: //jqueryui.com/demos/accordion/#sortable

谢谢！

这是我的代码（回复托马斯）：

$(function() {
    var stop = false;
    $("#ccaccordion h3").click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#ccaccordion")
        .accordion({
            header: "> div > h3",
            autoHeight: false,
            "option",
            "change",
            function(event, ui){
              ui.newHeader.parent().prependTo(this);
            }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

});
4

2 回答 2

2

我意识到这是一个较旧的线程，但我发现将“更改”更改为“更改开始”会导致在排序发生后发生幻灯片，在我看来这看起来好多了。

如果您像我一样喜欢在排序后进行幻灯片，您可以更改此设置：

$('#accordion')
    .accordion(
        'option',
        'change',
    function(event, ui){
        ui.newHeader.parent().prependTo(this);
    }
);

对此：

$('#accordion')
    .accordion(
        'option',
        'changestart',
    function(event, ui){
         ui.newHeader.parent().prependTo(this);
    }
);

将此添加到 jQuery UI Accordion 排序演示中，单击的标题将 A. 立即将自身排序到最顶部，然后 B. 滑动打开。

于 2011-11-19T21:22:45.893 回答
1

将此代码添加到演示示例：

$('#accordion')
  .accordion(
    'option',
    'change',
    function(event, ui){
      ui.newHeader.parent().prependTo(this);
    }
  );

编辑：

修改您的代码：

$(function() {
    var stop = false;
    $("#ccaccordion h3").click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#ccaccordion")
        .accordion({
            header: "> div > h3",
            autoHeight: false,
            change:
              function(event, ui){
                ui.newHeader.parent().prependTo(this);
              }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

});
于 2010-09-29T13:53:07.823 回答