如何在jQuery Sortable手风琴头上实现一个按钮

我一直在为我的网站制作一个jQuery自定义可排序手风琴。 下一个要实现的阶段是可排序手风琴的每个标题上的按钮，它将从jQuery可排序手风琴中删除部分可扩展列表。

我已准备好使用代码了，但是我似乎无法覆盖标题上的按钮而不是它在点击function上的标题的一部分来扩展或拖动函数进行排序，但是我确实希望它在按顺序排列时遵循手风琴。

function create_accordian(str) { $( str ) .accordion({ header: '> div > h3', autoHeight: false, active: false, collapsible: true, }) .sortable({ axis: 'y', handle: 'h3', stop: function( event, ui ) { // IE doesn't register the blur when sorting // so trigger focusout handlers to remove .ui-state-focus ui.item.children( 'h3' ).triggerHandler( 'focusout' ); } }); } 

小提琴

我已经尝试修改CSS以获取删除function的位置，上面的jQuery代码用于定义头部，将div包装在div并单独定义头部。 我所有的努力都走到了尽头。

我需要能够在每个标题上都有一个删除图标，它在排序时移动并具有单独的单击function，因此它不会展开或拖动手风琴。

最诚挚的问候，蒂姆

Answer 1

您需要两组更新才能达到预期目标。 注意我在添加了一个.RemoveSection类，带有’X’图标以方便这些示例。

首先，为您拥有的’X’图标创建一个.click()处理程序，并在第一步中使用.stopPropagation() （ 此处引用 ）以确保其click事件不会冒泡到jQ UI可排序：

 $('.RemoveSection').click(function(event){ event.stopPropagation(); }); 

接下来，利用jQ UI可排序窗口小部件的cancel选项（ 此处引用 ）将“X”图标排除在排序句柄之外：

 .sortable({ axis: 'y', handle: 'h3', cancel: '.RemoveSection', // This excludes your 'X' icon stop: function( event, ui ) { // IE doesn't register the blur when sorting // so trigger focusout handlers to remove .ui-state-focus ui.item.children( 'h3' ).triggerHandler( 'focusout' ); } }); 

更新了jsFiddle，分享自你的： http ： //jsfiddle.net/2aLec/2/

虽然我实际上没有添加脚本来删除可排序部分，但如果您需要帮助，请给它一个回去和回发。 您的一般方法应该是简单地将DOM从“X”图标遍历到父标题，然后删除它及其兄弟

（并且可以启动可排序的.refresh()以获得良好的衡量标准）。