将jquery手风琴元素从一个手风琴移动到另一个
问题描述:
这是一个奇怪的位。我有两个jQuery手风琴实体,在单手风琴中单击一个项目时,我想动态地将它添加到第二个手风琴中,并将其隐藏在原始手风琴中。将jquery手风琴元素从一个手风琴移动到另一个
目前这项工作很好地从A移到B,并从B移回A,但是当我将一个项目移回到原来的手风琴时,从A到B的任何后续移动都搞砸了。
这里是一个jsfiddle的例子,我的意思是http://jsfiddle.net/waveydavey/CAYth/。注意我强烈意识到代码很难看 - 我只是在学习这些东西。请随时提出更好的方法。请执行以下操作:
- 运行小提琴。
- 点击每个项目的“+”号可以移动到手风琴2
- 一切都很好。
现在做到这一点:
- 运行小提琴。
- 单击任一“+”移动到第二个手风琴
- 点击“X”上移动的项目,它重新出现在第一组
- 单击任一“+”项添加到第二组
- 手风琴项目显示完全混乱
任何意见将大规模赞赏。
的的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
});
}
});
答
看到这个更新小提琴: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
});
}
});
简约的,并且完全不明显对我!很多,非常感谢,我现在可以停止撕掉我的头发了。 – TopGearMedia 2013-03-05 12:45:48
欢迎...乐于帮助... – Anujith 2013-03-05 12:47:40