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

标签 javascript jquery html css jquery-ui

我正在尝试使 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 -->

最佳答案

我认为您可以将完整的标题和内容包装在一个 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>

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

关于javascript - jQuery Accordion 可排序问题 - 嵌套 Div 和嵌套标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24413664/

相关文章:

javascript - Javascript 中的parentNode 似乎不适合我

javascript - 使用jquery更改另一个元素下的html元素类

javascript - 如何将 css 文件添加到 Node js(不是 express)代码

javascript - 动画div定位重排

javascript - 有没有更短的方法来定义具有可变键的对象结构?

java - 如何从博客中获取帖子的内容?

javascript - AJAX - POST ' data:' - Uncaught Error - 意外的标识符

javascript - 切换和聚焦元素

javascript - 使用 Materialize CSS 并尝试在其父元素内的固定位置放置一个按钮但遇到问题

html - dt 标签在 IE 7 中相互 float