如何使用jQuery正确排序多个手风琴 [英] How to properly sort multiple accordions with jQuery
问题描述
这是我第一次发帖，如果我没有提供足够的详细信息，请告诉我。
我有一个包含多个手风琴的页面。我想使用多种手风琴，因为我希望用户能够同时打开多个部分，这对于手风琴来说不是原生的。
我也希望用户能够对那些手风琴进行排序。当前页面的设置方式，用户可以毫无问题地对手风琴进行排序。
当用户对手风琴进行排序时，我有一个脚本将关闭所有现有的手风琴，将它们的ID存储在一个数组中，然后在用户使用时重新打开它们完成排序。该部分也可以正常工作。
当您尝试将要排序的部分放在先前打开的两个部分之间时，会出现问题。似乎jQuery不能轻易地告诉一个部分开始的位置，并且一个部分以编程方式关闭时结束。请注意，如果它们已经关闭，它将按预期工作。
我已经尝试了几种解决这个问题的方法，包括在部分之间添加一个间隔div以及销毁手风琴，然后在排序结束后重新初始化它们无济于事。
我怀疑问题出现了，因为当第一次抓住手风琴时，这些部分是开放的。但是在这一点上，我关闭所有部分，即使该部分关闭，当你试图将一个部分放在两个部分之间时，它会导致这些部分偶尔跳转。
我还注意到手风琴内容的高度因素。在下面的例子中，第一个div在打开时会引起问题而你试图对它们进行排序，但其他的则不那么。
这是我的代码。 jQuery是基本的jQuery库，我编写的内容包括inline以简化：
< html>
< head>
< link href =/ css / flick / jquery-ui.cssmedia =screen =stylesheettype =text / css/>
< script type =text / javascriptsrc =/ js / jquery.js>< / script>
< script type =text / javascriptsrc =/ js / jquery-ui.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
//添加Accordion的东西
$（。accordion）。accordion（{
autoHeight：false，
active：false，
collapsible：true
}）; // end $（。accordion）。accordion
//添加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 ='';
//现在关闭所有其他部分
$ .each（$（'＃'+ parent_id +'。accordion'），函数（）{
//获取子元素，因为它有div ID我需要
child = $（this）.children（'div'）;
// get查看是否已打开或关闭的有效信息
active = $（this） .accordion（'option'，'active'）;
//检查这个是否扩展
if（parseInt（active）== active）{
/ /存储此ID，以便我们以后可以打开它
expanded_ones [count] = $（child）.attr（'id'）;
count ++;
//并关闭手风琴
$（this）.accordion（{active：false}）;
} //结束if（parseInt（active）== active）
}）; //结束$ .each（$（'＃'+ parent_id +'。accordion'），function（）
}，// end start：function（e，ui）
stop：function（e ，ui）{
container = $（e.target）;
var parent_elem ='';
//展开最初扩展的那些
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） ）
}）; //结束$（'。sortable'）。sortable
}）; //结束$（文件）.ready（function（）{
< / script>
< / head>
< body>
< div id =外>
< div class =box>
< div class =accordion_wrapper sortablerel =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>
&l吨; p为H.东西< / p为H.
< 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_bclass =section_accordion>
< div class =accordion>
< h4>手风琴B< / h4>
< div id =accordion_b_content>
东西
< / div>
< / div>
< / div>
< div id =accordion_cclass =section_accordion>
< div class =accordion>
< h4> Accordion C< / h4>
< div id =accordion_c_content>
东西
< / div>
< / div>
< / div>
< div id =accordion_dclass =section_accordion>
< div class =accordion>
< h4> Accordion D< / h4>
< div id =accordion_d_content>
东西
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
首先我会说，这真的需要是在手风琴或可排序？其次，我将您的示例设置为此处。使用此示例，sortable可以在整个地方发送页面，尤其是当手风琴A打开时。这对某些用户来说可能非常混乱。我建议找另一个选项来完成你的任务。
来自jQueries网站 Accordian上的API
注意：如果你想要多个部分
一次打开，不要使用手风琴
手风琴不允许超过
一个内容面板在
开放同时，这需要很多
的努力。如果您正在寻找允许多个
内容面板打开的小部件的
，请不要使用
。通常它可以用
几行jQuery编写，类似于
：
$（document）.ready（function（）{
$（'。accordion .head'）。click（function（）{
$（this）.next（） .toggle（）;
返回false;
}）。next（）。hide（）;
}）;
或动画：
$（document）.ready（function（）{
$（'。accordion .head'）。click（function（function） ）{
$（this）.next（）。toggle（'slow'）;
return false;
}）。next（）。hide（）;
}） ;
因此，如果您想要打开可排序的多个手风琴，我建议您创建自己的自定义代码。
This is my first time posting so please let me know if I fail to provide enough details.
I have a page that contains multiple accordions. I wanted to use multiple accordions because I wanted users to be able to have multiple sections open at once which is not native to accordion.
I also want users to be able to sort those accordions. The way the page is currently set up, users can sort the accordion with no problems.
When the user goes to sort the accordions, I have a script that will close all existing accordions, store their ids in an array, and then reopen them when the user is done sorting. That part works fine too.
The problem occurs when you try to place the section you are sorting between two sections that were previously open. It does not appear that jQuery can easily tell where one section begins and one ends when they are closed programatically. Note that if they were already closed, it works as expected.
I've tried several approaches to this problem including adding a spacer div between sections as well as destroying the accordions and then reinitializing them after the sorting is finished to no avail.
I suspect the problem occurs because when the accordion is first grabbed, the sections are open. But at that point, I close all the sections and even though the section closes, it causes those sections to jump around sporadically when you try to put a section between two.
I've also noticed that the height of the contents of the accordion factors in. In my example below, the first div causes problems when it is open and you try to sort them but the others less so.
Here is the code I have. The jQuery is the basic jQuery library and the stuff I wrote I included inline for simplicity:
<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>
Firstly i would say, does this really need to be in accordians or sortable? Secondly i set up your example here. Using this example the sortable can send the page all over the place especially when accordian A is open. This can be extremely confusing to some users. I would recommend finding another option to complete your task.
From jQueries website API on Accordian
NOTE: If you want multiple sections open at once, don't use an accordion
An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:
$(document).ready(function(){
$('.accordion .head').click(function(){
$(this).next().toggle();
return false;
}).next().hide();
});
Or animated:
$(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});
So i would recommend creating your own custom code if you want to have multiple accordians open that are sortable.
这篇关于如何使用jQuery正确排序多个手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
