Question

我希望在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;
            }
        });

});

Answer 1

我意识到这是一个较旧的主题，但我发现将'change'更改为'changestart'会导致幻灯片在排序发生后发生，在我看来这看起来好多了。

如果您喜欢在排序后进行幻灯片放映，可以更改此内容：

$('#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.滑动打开。

Answer 2

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

$('#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;
            }
        });

});

JQuery UI Auto-Sortable Accordion - 这可能吗？

2 个答案: