2

ちょっと変だな、これ。2 つの jquery アコーディオン エンティティがあり、1 つのアコーディオンでアイテムをクリックすると、それを 2 番目のアコーディオンに動的に追加し、元のアコーディオンで非表示にしたいと考えています。

これは現在、A から B への移動、および B から A への移動でうまく機能しますが、アイテムを元のアコーディオンに戻すと、その後の A から B への移動は台無しになります。

http://jsfiddle.net/waveydavey/CAYth/を意味するjsfiddleの例を次に示します。コードが醜いことを完全に認識していることに注意してください-私はこのことを学んでいます。10倍良い方法を提案してください。以下をせよ：

  • フィドルを実行します。
  • 各項目の「+」をクリックするとアコーディオン2に移動します
  • どれも本当によく動きます。

今これを行います：

  • フィドルを実行します。
  • 任意の「+」をクリックして 2 番目のアコーディオンに移動します
  • 移動したアイテムの「x」をクリックすると、最初のセットに再表示されます
  • 「+」項目をクリックして、2 番目のセットに追加します
  • アコーディオンアイテムの表示が完全にめちゃくちゃ

どんなアドバイスでも大歓迎です。

jsfiddle コードは次のとおりです。

    $(function() {
 // create accordion entities
 $('#avAccordion').accordion({
        collapsible: true,
        autoHeight: false,
        active: false
    });
 $('#assignedAccordion').accordion({
        collapsible: true,
        autoHeight: false,
        active: false
    });
 $('.accordionAdd').click(function(){
        // destroy the accordion, prior to rebuilding
        $('#avAccordion').accordion('destroy');
        // get the h3 part and tweak it's contents
        var h3bit = $(this).parent().clone();
        $(h3bit).removeClass('freeContacts').addClass('assignedContacts');
        $(h3bit).children('span').removeClass('ui-icon-circle-plus accordionAdd').addClass('ui-icon-circle-close accordionDel');
        // get the div part after the h3
        var divbit = $(this).parent().next().clone();
        // rebuild original accordion
        $( "#avAccordion" ).accordion({
            collapsible: true,
            autoHeight: false,
            active: false
        });
        // move contents to other accordion
     $('#assignedAccordion').append(h3bit)
         .append(divbit)
         .accordion('destroy')
         .accordion({
            collapsible: true,
            autoHeight: false,
            active: false
        });
        // hide original accordion entry
        $(this).parent().hide();
        //attach click handler to new item
        $('.accordionDel').click(function(){
            dropAssignedContact(this);
            return false;
        })
        return false;
    });

    function dropAssignedContact(obj){
        // unhide right hand object with appropriate data-id attr
        var id = $(obj).parent().attr('data-id');
       // delete myself
        $(obj).parent().remove();
        // unhide original
        $('.freeContacts[data-id='+id+']').show();
        $('#assignedAccordion').accordion('destroy').accordion({
            collapsible: true,
            autoHeight: false,
            active: false
        });
    }
});
4

1 に答える 1

1

この更新されたフィドルを参照してください: http://jsfiddle.net/KTWEd/

function dropAssignedContact(obj){
    // unhide right hand object with appropriate data-id attr
    var id = $(obj).parent().attr('data-id'); 

   // delete myself
    $(obj).parent().next().remove();   // <---   Removes the adjacent div
    $(obj).parent().remove();

    // unhide original
    $('.freeContacts[data-id='+id+']').show();
    $('#assignedAccordion').accordion('destroy').accordion({
        collapsible: true,
        autoHeight: false,
        active: false
    });
 }
});
于 2013-03-05T11:37:03.490 に答える