Question

我有手风琴可折叠和可分类。

查看此处的完整代码[{3}}

这就是我正在使用的JS代码

$( "#accordion" )
    .accordion({
        header: "> div > h3",
        collapsible: true
    })
    .sortable({
        handle: "h3",
        placeholder: "ui-state-highlight",
        stop: function( event, ui ) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children( "h3" ).triggerHandler( "focusout" );
        }
    });

当我尝试对扩展的div组进行排序时，唯一的问题是很大并且很难排序，当它是第一个div并且你拖动它时，你看不到它下方，因为如果高度大小

enter image description here

请参阅下图，这是折叠div的示例，看看它的易用性，您可以轻松地在下面看到它。

enter image description here

所以我需要达到的是当用户尝试对扩展的div进行排序时，飞行div会变成这样的折叠形状

enter image description here

当他放弃元素时，只需转回到正常扩展

Answer 1

我建议您执行以下操作：

$(function() {
    var active = false,
        sorting = false;

    $( "#accordion" )
    .accordion({
        header: "> div > h3",
        collapsible: true,
        activate: function( event, ui){
            //this fixes any problems with sorting if panel was open 
            //remove to see what I am talking about
            if(sorting)
                $(this).sortable("refresh");   
        }
    })
    .sortable({
        handle: "h3",
        placeholder: "ui-state-highlight",
        start: function( event, ui ){
            //change bool to true
            sorting=true;

            //find what tab is open, false if none
            active = $(this).accordion( "option", "active" ); 

            //possibly change animation here (to make the animation instant if you like)
            $(this).accordion( "option", "animate", { easing: 'swing', duration: 0 } );

            //close tab
            $(this).accordion({ active:false });
        },
        stop: function( event, ui ) {
            ui.item.children( "h3" ).triggerHandler( "focusout" );

            //possibly change animation here; { } is default value
            $(this).accordion( "option", "animate", { } );

            //open previously active panel
            $(this).accordion( "option", "active", active );

            //change bool to false
            sorting=false;
        }
    });
});

样本： http://jsfiddle.net/m939m/2/

如果您有任何疑问，请与我们联系！干杯！

Answer 2

查看可排序的文档

查看可排序事件的开始（event，ui）。然后逻辑将检查项目是否展开。如果是这样，那么关闭它。排序后再次展开

http://api.jqueryui.com/sortable/#event-start

Answer 3

在可排序对象的stop事件之前添加以下代码。

   over: function(event, ui) {
         $('#accordion').accordion({active:false});
    },

http://jsfiddle.net/wvtPw/8/

Answer 4

虽然此代码适用于排序时的折叠/扩展问题，但“激活”功能会导致打开手风琴中第一个项目的问题。打开和关闭第一个项目使其无法重新打开。继续下一个项目，同样的事情发生。最后，完整的项目清单将无法扩展。

Answer 5

由于这更像是一个用户体验问题，我的建议是提供不同的用户体验。我会默认禁用排序，并提供一个按钮来打开/关闭排序。启用排序后，折叠所有字段并禁用手风琴。

$( '.accordion-toggle' ).on('click', function() { 
    $( "#accordion" ).toggleClass( 'sorting' );
});
$( "#accordion:not(.sorting)" )
    .accordion({
        header: "> div > h3",
        collapsible: true
    });
$( "#accordion.sorting" )
    .sortable({
        handle: "h3",
        placeholder: "ui-state-highlight",
        stop: function( event, ui ) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children( "h3" ).triggerHandler( "focusout" );
        }
    });

编辑：（2018-06-18）我错过了这是jQuery UI。您可能想要使用启用/禁用功能。

$( '.accordion-toggle' ).on( 'click', function() {
  if ( $( '#accordion' ).hasClass( 'sorting' ) ) {
    $( '#accordion' ).removeClass( 'sorting' )
      .accordion( "enable" )
      .sortable( "disable" );
  } else {
    $( '#accordion' ).addClass( 'sorting' )
      .sortable( "enable" )
      .accordion( "disable" )

使可折叠可折叠手风琴分类成倒塌形状

5 个答案: