这是我第一次发帖，所以如果我未能提供足够的详细信息，请告诉我。
我有一个包含多个手风琴的页面。我想使用多个手风琴，因为我希望用户能够同时打开多个部分，这不是手风琴本身的。
我还希望用户能够对这些手风琴进行排序。按照当前页面的设置方式，用户可以毫无问题地对手风琴进行排序。
当用户对手风琴进行排序时，我有一个脚本将关闭所有现有的手风琴，将它们的 id 存储在一个数组中，然后在用户完成排序后重新打开它们。那部分也工作得很好。
当您尝试将要排序的部分放置在之前打开的两个部分之间时，就会出现此问题。当以编程方式关闭它们时，jQuery 似乎无法轻松判断一个部分的开始位置和结束位置。请注意，如果它们已经关闭，则它会按预期工作。
我已经尝试了几种解决此问题的方法，包括在部分之间添加间隔 div 以及销毁手风琴，然后在排序完成后重新初始化它们，但无济于事。
我怀疑出现这个问题是因为当第一次抓住手风琴时，各部分是打开的。但那时，我关闭了所有部分，即使该部分关闭，当您尝试在两个部分之间放置一个部分时，它也会导致这些部分偶尔跳转。
我还注意到手风琴内容的高度因素。在下面的示例中，第一个 div 在打开时会导致问题，并且您尝试对它们进行排序，但其他 div 则不然。
这是我的代码。 jQuery 是基本的 jQuery 库，为了简单起见，我将我编写的内容内联起来：
<html>
<head>
<link href="/css/flick/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Add Accordion stuff
$(".accordion").accordion({
autoHeight: false,
active: false,
collapsible: true
}); // end $(".accordion").accordion
// Add sortables
$('.sortable').sortable({
start: function(e, ui) {
container = $(e.target);
var parent_id = container.parent().parent().attr('id');
expanded_ones = new Array();
var count = 0;
var summary = '';
var child = '';
var active = '';
// now close all other sections
$.each($('#' + parent_id + ' .accordion'), function() {
// get the child element since that has the div id I need
child = $(this).children('div');
// get the active information to see if it is open or closed
active = $(this).accordion('option', 'active');
// check to see if this one is expanded
if(parseInt(active) == active) {
// store this id so we can open it later
expanded_ones[count] = $(child).attr('id');
count++;
// and close the accordion
$(this).accordion({ active: false });
} // end if(parseInt(active) == active)
}); // end $.each($('#' + parent_id + ' .accordion'), function()
}, // end start: function(e, ui)
stop: function(e, ui) {
container = $(e.target);
var parent_elem = '';
// expand the ones that were originally expanded
for(var i = 0; i < expanded_ones.length; i++) {
parent_elem = $('#' + expanded_ones[i]).parent();
$(parent_elem).accordion('option', 'active', 0);
} // end for(var i = 0; i < expanded_ones; i++)
} // end stop: function(e, ui)
}); // end $('.sortable').sortable
}); // end $(document).ready(function() {
</script>
</head>
<body>
<div id="outer">
<div class="box">
<div class="accordion_wrapper sortable" rel="sections">
<div id="accordion_a" class="section_accordion">
<div class="accordion">
<h4>Accordion A</h4>
<div id="accordion_a_content">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
</div>
</div>
<div id="accordion_b" class="section_accordion">
<div class="accordion">
<h4>Accordion B</h4>
<div id="accordion_b_content">
Stuff
</div>
</div>
</div>
<div id="accordion_c" class="section_accordion">
<div class="accordion">
<h4>Accordion C</h4>
<div id="accordion_c_content">
Stuff
</div>
</div>
</div>
<div id="accordion_d" class="section_accordion">
<div class="accordion">
<h4>Accordion D</h4>
<div id="accordion_d_content">
Stuff
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
