2

すべての要素が折りたたまれている場合にのみjqueryアコーディオンをソート可能にすることは可能ですか? 並べ替え可能なアコーディオンがありますが、アクティブな要素が移動すると、ページ上の css が壊れます (列が再配置されます)。これは、アコーディオンではなく、サイトの css に問題がある可能性が高いことはわかっていますが、すべての css を調整する権限がありません。以下は、アコーディオンを作成するために使用しているコードです。

<script type='text/javascript'>

    var selected = new  Array();
    var ids = new Array();
    var counter = <?php echo (req('fd_id'))? count($results): 0;?>;
    $(document).ready(function(){
        $("#livesearch").bind("keyup", function () {
                var value = escape($("#livesearch").val());
                if (value.length == 0)
                    $("#results").fadeOut(500);
                else
                {
                    $("#results").fadeIn(500);
                    $("#results").load("<?php echo matry::base_to('utilities/search/referral_search&str=')?>" + value);
                }
            });
        $(function () {
            $("#trip_list").accordion({
                header: ">li >h3",
                collapsible: true
            }).sortable({
                axis: 'y',
                handle: 'h3',
                stop: function(event, ui)
                {
                    ui.item.children( "h3" ).triggerHandler( "focusout" );
                }
            });

            });
        $("#livesearch").blur(function(){$("#livesearch").val(""); $("#results").fadeOut(500);});
        $("#reset").click(function(){$("#trip_list").html("");});
        $("button.remove").on('click', function (){
                $(this).parents('li').remove();
            });
        $("button#save").on('click', function (){
                $.ajax({
                    type: 'POST',
                    url: '<?php echo matry::base_to('utilities/crm/field_day_save');?>',
                    data: $("form#trip_form").serialize(),
                    dataType: 'json',
                    success: function (data)
                    {
                        $("#alerts").html(data.alert);
                        $("#form_id").val(data.id);
                    }
                    });
            });
    });

    function selectItem(id)
    {
        if (counter < 20) //only allow 20 referral sources at a time
        {
            $.get("<?php echo matry::base_to('utilities/field_day'); ?>&rfcode=" + id + "&count=" + counter, function(data){
                        $("#trip_list").append(data).accordion('destroy').accordion({header: "li >h3", collapsible: true});}); 
            counter++;
        }
    }

</script>

アップデート

以下を追加しましたが、2番目以降のパネルでしか機能しません。最初のパネルはそれを無視します。助言がありますか？

$(function () {
            $("#trip_list").accordion({
                header: "li >h3",
                active: false,
                collapsible: true,
                activate: function(){if($(this).accordion('option', 'active')){$(this).sortable('disable');}else $(this).sortable('enable');}
            }).sortable({
                axis: 'y',
                handle: 'h3',
                stop: function(event, ui)
                {
                    ui.item.children( "h3" ).triggerHandler( "focusout" );
                }
            });
4

1 に答える 1

5

1. accordion() イベントで sortable() メソッドを使用する

アコーディオン パネルが開いたり閉じたりするたびに発生するアコーディオンのaccordionactivateイベントを使用して、アコーディオンが折りたたまれているかどうかを確認し、それに応じて.sortable('enable')または.sortable('disable')メソッドを適用できます。

2. アコーディオンが折りたたまれているかどうかを検出する

イベント ハンドラーでアコーディオンの状態を検出するには、ui.newPanelプロパティを確認します。これは、新しく開いたアコーディオン パネルを含む jQuery オブジェクトです。が空のオブジェクトでない場合ui.newPanelは、アコーディオンが折りたたまれていない (つまり、閉じたパネルがクリックされた) ことを意味します。同様に、ui.newPanelが空のオブジェクトの場合は、アコーディオンが完全に折りたたまれていることを意味します (つまり、開いているパネルがクリックされ、その場所に新しいパネルが開かれていません)。

例とデモ

$('#accordion').accordion({...}).sortable({...});

$('#accordion').on('accordionactivate', function (event, ui) {
     // Accordion is not collapsed
    if (ui.newPanel.length) {
        $('#accordion').sortable('disable');
     // Accordion is collapsed
    } else {
        $('#accordion').sortable('enable');
    }
});

jsFiddle のデモを見る

于 2013-02-06T21:45:37.900 に答える