Question

我正在尝试对手风琴进行排序，但与默认示例相比，目前看起来似乎是闪烁的。

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

当使用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中包含完整的标题和内容，然后在items中将该div设置为sortable选项。那样可以解决你的问题。

演示：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>

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

jQuery手风琴可排序问题 - 嵌套Divs＆amp;嵌套标题

1 个答案: