仅当所有元素都折叠时,是否可以使 jquery 手风琴可排序?我有一个可排序的手风琴,但是当活动元素被移动时,它会破坏页面上的 css(重新排列列)。我知道这可能是网站上的 css 而不是手风琴的问题,但我无权调整所有 css。下面是我用来创建手风琴的代码:
<script type='text/javascript'>
var selected = new Array();
var ids = new Array();
var counter = <?php echo (req('fd_id'))? count($results): 0;?>;
$(document).ready(function(){
$("#livesearch").bind("keyup", function () {
var value = escape($("#livesearch").val());
if (value.length == 0)
$("#results").fadeOut(500);
else
{
$("#results").fadeIn(500);
$("#results").load("<?php echo matry::base_to('utilities/search/referral_search&str=')?>" + value);
}
});
$(function () {
$("#trip_list").accordion({
header: ">li >h3",
collapsible: true
}).sortable({
axis: 'y',
handle: 'h3',
stop: function(event, ui)
{
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
});
$("#livesearch").blur(function(){$("#livesearch").val(""); $("#results").fadeOut(500);});
$("#reset").click(function(){$("#trip_list").html("");});
$("button.remove").on('click', function (){
$(this).parents('li').remove();
});
$("button#save").on('click', function (){
$.ajax({
type: 'POST',
url: '<?php echo matry::base_to('utilities/crm/field_day_save');?>',
data: $("form#trip_form").serialize(),
dataType: 'json',
success: function (data)
{
$("#alerts").html(data.alert);
$("#form_id").val(data.id);
}
});
});
});
function selectItem(id)
{
if (counter < 20) //only allow 20 referral sources at a time
{
$.get("<?php echo matry::base_to('utilities/field_day'); ?>&rfcode=" + id + "&count=" + counter, function(data){
$("#trip_list").append(data).accordion('destroy').accordion({header: "li >h3", collapsible: true});});
counter++;
}
}
</script>
更新
我添加了以下内容,但它仅适用于第二个或更多面板。第一个面板忽略它。有什么建议么?
$(function () {
$("#trip_list").accordion({
header: "li >h3",
active: false,
collapsible: true,
activate: function(){if($(this).accordion('option', 'active')){$(this).sortable('disable');}else $(this).sortable('enable');}
}).sortable({
axis: 'y',
handle: 'h3',
stop: function(event, ui)
{
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});