jquery动态降/手风琴

Question

我是javascript和jquery的新手plz帮助，

我有一个我拖动的列表，如

<ul class='drag-list'>
    <li>category 1</li>
    <li>category2</li>
    ------------
    ------------
</ul>

并将其放在

上

<div class='dropArea'>
    <div id="accordion"></div>
</div>

当我删除列表时，它应该转换为accordin

我的拖放代码是

$( ".drag-list li" ).draggable({        
    helper:"clone"
});

$( ".dropArea" ).droppable({        
    drop:function(event,ui){        
        addCategory(ui.draggable.html());       
        $( "#accordion" ).accordion({
            collapsible: true,
            header:'h3'
        });
    }
});


Category = function(item){
    var category = $("<h3><a href='#'>"+item+"</a></h3> \
                      <div> \
                      <p>hello I am accordion</p> \
                      </div>");
    return category;
}

function addCategory(item) {
    var category = Category(item);
    $('#accordion').append(category);
}

之后只有第一个拖动李获得手风琴后没有添加任何课程

我还在类别对象上使用了addClass（'ui-accordion'），但仍无效

帮助我无法理解

http://jsfiddle.net/ZXYrx/

下面是我想要的屏幕截图

Answer 1

您必须在每一滴上重新创建手风琴，请执行以下操作：

    $( "#accordion" ).accordion('destroy').accordion({
        collapsible: true,
        header:'h3'
    });

如果destroy删除了您的内容，请先将其var html = $('#accordion').html();取出然后销毁。然后在重新创建之前设置内容。

Answer 2

好的......就像康斯坦丁所说的那样，顺便说一下，你需要摧毁并重建手风琴：

像：

$( ".dropArea" ).droppable({        
    drop:function(event,ui){        
        addCategory(ui.draggable.html());       
        $( '#accordion' ).accordion( "detroy" ); // <-- destroy
        $( "#accordion" ).accordion({
            collapsible: true,
            header:'h3'
        });
    }
});