如何在jQuery可排序的手风琴标题上实现按钮

Question

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

我已经准备好使用的代码，但是我似乎不能在标题上覆盖按钮，如果它不是标题的一部分，点击函数展开或拖动函数排序，但是我确实希望它在排序时跟随手风琴。

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的位置属性的删除功能，上面的jQuery代码的头被定义，包装在一个div和单独定义的头。我所有的努力都白费了。

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

最诚挚的问候,蒂姆。

Answer 1

您需要两组更新来实现期望的目标。注意，我在<span>中添加了一类.RemoveSection，并带有"X"图标，以方便这些示例。

首先，为您拥有的'X'图标创建一个.click()处理程序，并在其第一步中，使用.stopPropagation()(此处参考)来确保其单击事件不会冒泡到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'图标到父标题，然后删除它&它的兄弟<div>(也许会启动一个.refresh()的排序)。