[英]jQuery Accordion Sortable Issue - Nested Divs & Nested Header
我正在尝试使手风琴可排序,但与默认示例相比,此刻它似乎比较忽悠。
我认为问题与我的嵌套结构有关,但我认为将内容包装在div中就可以解决。
实际的手风琴工作正常,使用可排序命令时似乎很难。
我正在尝试将这样的样式栏用作节标题: 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作为items
选项设置为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>
让我知道是否可以解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.