Javascript jQuery手风琴可排序问题-嵌套div&；嵌套标题

我试图使手风琴分类，但目前它似乎比默认的例子闪烁

我相信这个问题与我的嵌套结构有关，但我认为将内容包装在div中就可以解决这个问题

实际的手风琴工作得很好，但在使用sortable命令时，它似乎有些困难

我正在尝试对节标题使用这样的样式栏：

这将显示一个多列div内容

Jquery：

// Accordion
$( "#accordion" )
  .accordion({
    header: ".accordion-section",
    collapsible: true,
  })
  .sortable({
    axis: "y",
    handle: ".accordion-order",
    stop: function( event, ui ) {
      // IE doesn't register the blur when sorting
      // so trigger focusout handlers to remove .ui-state-focus
      ui.item.children( ".accordion-order" ).triggerHandler( "focusout" );
    }
  });

HTML

<!-- ACCORDION -->
<div id="accordion">

    <!-- ACCORDION SECTION HEADING 1 -->
      <div class="grid dark-grey-bkg accordion-section">
        <span class="accordion-section-number">1</span>
        <span class="accordion-section-title">This is an example title 1</span>
        <span class="accordion-order">^</span>
      </div>
    <!-- /ACCORDION SECTION HEADING -->

    <!-- ACCORDION SECTION CONTENT 1  -->
      <div class="accordion-content">

            <div class="col-8">
                <div>
                    <h3>Content Here</h3>
                </div>
            </div>

            <div class="col-4">
                <div>

                    <h3>Content Here</h3>

                    <div>
                        <div class="col-12">
                            <h3>Content Here</h3>
                        </div>
                    </div>

                    <div>
                        <h3>Content Here</h3>
                    </div>

                    <div>
                        <h3>Content Here</h3>
                    </div>

                </div>
            </div>

      </div>
    <!-- /ACCORDION SECTION CONTENT 1 -->

1.
这是标题1的一个示例
^
满足于此
满足于此
满足于此
满足于此
满足于此

---

我认为您可以将完整的标题和内容包装在一个div中，然后将该div设置为

可排序的
中的
项。那会解决你的问题

演示：

Js:

HTML:


1.
这是标题1的一个示例
^
示例内容
1.
这是标题1的一个示例
^
示例内容
1.
这是标题1的一个示例
^
示例内容

让我知道它是否解决了您的问题。
您能为您的代码创建一个提琴吗？这是小提琴-我想要红色的盒子来排序手风琴项目的顺序，但你可以看到它失去了它的内容，是非常起伏的外观。手风琴的内容将更加复杂，但其思想是，标题不仅仅是一个元素，它是一个具有很少跨距的div，然后内容在div包装中，就像我喜欢的一样复杂谢谢你我的先生是一个传奇！我看不见森林，看不见树木！非常感谢你！很高兴它帮助了你。
    // Accordion
$("#accordion")
    .accordion({
    header: ".accordion-section",
    collapsible: true,
    heightStyle: 'fill',
})
    .sortable({
    axis: "y",
    items: '.container', //selector which wraps the header and content
    handle: ".accordion-order",
    stop: function (event, ui) {
        // IE doesn't register the blur when sorting
        // so trigger focusout handlers to remove .ui-state-focus
        ui.item.children(".accordion-order").triggerHandler("focusout");
    }
});

<!-- ACCORDION -->
<div id="accordion">
    <div class="container">
        <div class="accordion-section"> <span class="accordion-section-number">1</span>
 <span class="accordion-section-title">This is an example title 1</span>
 <span class="accordion-order">^</span>

        </div>
        <div>
            <div class="accordion-content">Example Content</div>
        </div>
    </div>
    <div class="container">
        <div class="accordion-section"> <span class="accordion-section-number">1</span>
 <span class="accordion-section-title">This is an example title 1</span>
 <span class="accordion-order">^</span>

        </div>
        <div>
            <div class="accordion-content">Example Content</div>
        </div>
    </div>
    <div class="container">
        <div class="accordion-section"> <span class="accordion-section-number">1</span>
 <span class="accordion-section-title">This is an example title 1</span>
 <span class="accordion-order">^</span>

        </div>
        <div>
            <div class="accordion-content">Example Content</div>
        </div>
    </div>
</div>