javascript - jQuery Accordion 可排序问题 - 嵌套 Div 和嵌套标题

Question

我正在尝试使 Accordion 可排序，但与默认示例相比，目前它看起来有点不稳定。

我认为这个问题与我的嵌套结构有关，但我认为将内容包装在一个 div 中会解决这个问题。

实际的 accordion 工作正常，只是在使用 sortable 命令时似乎很困难。

我正在尝试为节标题使用这样的样式栏: https://www.dropbox.com/s/y5ebikvx9kc9jmu/Screenshot%202014-06-25%2018.09.01.png

然后会显示多列 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 -->

Answer 1

我认为您可以将完整的标题和内容包装在一个 div 中，然后将该 div 设置为 sortable 中的 items 选项。那将解决您的问题。

演示:http://jsfiddle.net/lotusgodkk/ZNL77/13/

Js:

    // 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");
    }
});

HTML:

<!-- 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>

如果它解决了您的问题，请告诉我。