jQuery在手风琴中的手风琴

Question

我想在另一个可排序列表中创建一个可排序列表。为此，我正在手风琴中使用手风琴。

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
$( function() {
$( "#accordion" )
  .accordion({
    header: "> div > h3"
  })
  .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" );

      // Refresh accordion to handle new order
      $( this ).accordion( "refresh" );
    }
  });
  });

  $(function () {
      $("#accordion1")
          .accordion({
              header: "> div > h3"
          })
          .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");

                  // Refresh accordion to handle new order
                  $(this).accordion("refresh");
              }
          });
  });

<div style="padding:5px">
        <div id="accordion1">
        <asp:ListView ID="lstSList" runat="server" OnItemDataBound="lstSList_ItemDataBound">
        <LayoutTemplate> 
            <table border="1" cellpadding="2" cellspacing="0" style="width:100%;">
                <tr class="TableHeader">     
                    <td> Section Description</td>              
                </tr>

                <tr id="ItemPlaceholder" runat="server"></tr>
            </table>
        </LayoutTemplate>
        <EmptyDataTemplate>No Sections found</EmptyDataTemplate>

        <ItemTemplate>           
                <div class="group">
                        <h3><%#Eval("Description")%></h3>
                  <div>    
                    <div style="padding:5px;display:none" id="pnlSectionQuestions">
                        <asp:ListView ID="lstQuestionList" runat="server">
                        <LayoutTemplate>                    
                                <tr id="ItemPlaceholder" runat="server"></tr>                   
                        </LayoutTemplate>
                        <EmptyDataTemplate>No questions added for this section</EmptyDataTemplate>
                        <ItemTemplate>
                            <div class="group">
                            <tr class="TableData">
                                <td><asp:Label ID="Label2" runat="server" Text='<%#Eval("QuestionDesc")%>' /></td>                       
                                <td><asp:Label ID="Label6" runat="server" Text='<%#Eval("Tag")%>' /></td>
                                <td runat="server"> <div class="btn btn-default btn-sm" id="btnEdit" style="margin-top:5px" onclick='<%#Eval("QuestionId","editClicked({0})") %>'>Edit</div></td>
                            </tr>
                            </div>
                        </ItemTemplate>
                        </asp:ListView>
                    </div>
                </div>
                </div>        
        </ItemTemplate>         
        </asp:ListView>
       </div>
    </div>

c＃代码：

 protected void lstSList_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        ListView lstSectionQuestionList = (ListView)e.Item.FindControl("lstSectionQuestionList");

        SQLHelper sq = new SQLHelper();
        lstSectionQuestionList.DataSource = sq.GetQuestionBySectionId(25);
        lstSectionQuestionList.DataBind();

    }
}

第一个手风琴可以正确渲染并且可以排序，但是不会显示第一个手风琴内的第二个列表视图（它在第一个列表视图的末尾显示所有行。）。 请告知我该如何解决。