Jquery 可折叠表，可排序，一次移动2行？

我试图将两个jquery事件混合在一起，但很难让它正常工作。我正在使用jQueryUI的可排序功能，以允许拖放表行。。。并使用Jquery可折叠菜单。基本上，单击父行时，会在其下方打开一个子行

我需要能够拖动父行，并让子行跟随。单击父项应使子项显示在父项下方。当前，子对象被抛在后面，并扩展到父对象以前所在的位置

此外，孩子不应该能够排序

我有一个JSFiddle在这里展示了这一点：

以下是HTML：

<table border="1" width="100%">
    <tbody>
        <tr class="parent" id="parent-1"><td>1</td></tr>
        <tr class="child-parent-1"><td>1.1</td></tr>
        <tr class="parent" id="parent-2"><td>2</td></tr>
        <tr class="child-parent-2"><td>2.1</td></tr>
        <tr class="parent" id="parent-3"><td>3</td></tr>
        <tr class="child-parent-3"><td>3.1</td></tr>
        <tr class="parent" id="parent-4"><td>4</td></tr>
        <tr class="child-parent-4"><td>4.1</td></tr>
        <tr class="parent" id="parent-5"><td>5</td></tr>
        <tr class="child-parent-5"><td>5.1</td></tr>
    </tbody>
</table>

我正在努力保持它的干净，因为表将包含数据。。我尝试使用HTML表与DIV/UL/LI进行维护

---

谁能帮我想出一个解决办法，让孩子和父母一起行动？

我想出了一个解决办法。答案似乎是向sortable添加一个函数，该函数在“开始”和“停止”时触发。我使用的代码如下：

start: function(event, ui) {
    ui.item.startPos = ui.item.index();
},
stop: function(event, ui) {
    if(ui.item.startPos < ui.item.index()){
        var child = $('.child-' + ui.item.context.id).remove().clone();
        $('#' + ui.item.context.id).after(child);
        var child = $('.'+$('.child-' + ui.item.context.id).next().attr('class')).remove().clone();
        $('#' + ui.item.context.id).before(child);    
    }else{
        var child = $('.child-' + ui.item.context.id).remove().clone();
        $('#' + ui.item.context.id).after(child);
    }
},

start:函数（事件、用户界面）{
ui.item.startPos=ui.item.index（）；
},
停止：功能（事件、用户界面）{
if（ui.item.startPos

子行被复制到变量中，然后被删除。它放在父行之后的代码中

有一个JSFIDLE显示了这一点：

---

有一个错误导致该行在向下移动时切断了另一个子行，因此有两个单独的函数根据移动的方向触发。

有一个用于嵌套排序表的插件，但我担心它只适用于列表，不适用于表！我见过嵌套表，但正如您所提到的，它不能用于具有结构化数据的表行。

start: function(event, ui) {
    ui.item.startPos = ui.item.index();
},
stop: function(event, ui) {
    if(ui.item.startPos < ui.item.index()){
        var child = $('.child-' + ui.item.context.id).remove().clone();
        $('#' + ui.item.context.id).after(child);
        var child = $('.'+$('.child-' + ui.item.context.id).next().attr('class')).remove().clone();
        $('#' + ui.item.context.id).before(child);    
    }else{
        var child = $('.child-' + ui.item.context.id).remove().clone();
        $('#' + ui.item.context.id).after(child);
    }
},