将jquery手风琴元素从一个手风琴移动到另一个手风琴
Moving jquery accordion elements from one accordion to another
这个有点奇怪。我有两个jquery手风琴实体,在单击一个手风琴中的一个项目时,我想动态地将其添加到第二个手风琴中,并将其隐藏在原始手风琴中。
这目前从A移动到B,从B移动到A,但当我移动一个项目回到原来的手风琴,从A到B的任何后续移动搞砸了。
这里有一个简单的例子来说明我的意思http://jsfiddle.net/waveydavey/CAYth/。注意,我完全意识到代码很难看——我只是在学习这些东西。请随意提出好上10倍的方法。
- 运行小提琴。
- 点击每个项目的"+"移动到手风琴2 所有人都移动得很好。
现在这样做:
- 运行小提琴。
- 点击任意"+"移动到第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
});
}
});
相关文章:
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- Bootstrap折叠手风琴一个面板打开,所有其他面板关闭
- 如果一个手风琴发出咔嗒声,如何最大限度地减少其他手风琴
- 从另一个页面链接到手风琴的一部分
- Jquery手风琴html表显示了一个<tbody>内容
- 如何创建一个优雅的手风琴菜单
- 我想让HTML链接打开一个js手风琴
- Twitter 引导程序:在开放手风琴标题中添加一个类
- 使用jQuery删除最后一个手风琴
- AngularJS - 我需要一个手风琴,可以选择在当时打开多个面板.
- 手风琴下一个按钮
- 手风琴我想更改第一个 li 边框半径和最后一个 li 边框半径,我该怎么做请帮助我.
- 我是否可以在 Bootstrap 3 中为折叠手风琴指定一个相对的“数据目标”,同时保留“折叠其他”功能
- 我做了一个手风琴菜单,但没有子菜单的链接不起作用.
- 页面上的手风琴需要有一个盒子保持打开状态,不能折叠
- 如何制作一个在移动设备上运行良好的动画手风琴?纯JS或WebKit transform3d
- 有了手风琴菜单,我如何确保打开一个菜单会关闭它的兄弟菜单
- Webix:通过一个按钮完全折叠手风琴
- 当其中一个面板以手风琴形式打开时,关闭其他面板
- 从另一个页面链接打开手风琴上的特定部分