我有一个jquery (v 1.11.4) ui手风琴,它将在不同的客户订单(不同的长度)打开时ajax。我遇到的问题是,因为创建手风琴时内容不存在,所以高度设置不正确,并且内容与下面的手风琴重叠。
我试过在True/False之间改变autoheight,在content, fill, panel, auto, "content"one_answers"panel"之间改变highightstyle,并同时使用它们,以防万一。
HTML:<div id="orders-accordion" class="account-details">
<xsl:for-each select="//orderhistory/row">
<div class="order-wrapper">
<div class="order-accordion-header property-list" data-oid="{@orderid}">
<ul>
<li class="order-no">
<span class="property-label">Order No.</span>
<span class="property-value">
<xsl:value-of select="@orderid"/>
</span>
</li>
<li class="order-date">
<span class="property-label">Order Date</span>
<span class="property-value">
<xsl:value-of select="@orderdate"/>
</span>
</li>
<li class="order-current-status">
<span class="property-label">Order Status</span>
<span class="property-value">
<xsl:value-of select="@orderstatus"/>
</span>
</li>
</ul>
</div>
<div class="order-info" style="display:none">
<!-- Order Detail Ajaxed into here -->
</div>
</div>
<xsl:if test="position()=1">
<script>
bindClickToOrderBox('showTopBox');
</script>
</xsl:if>
</xsl:for-each>
</div>
JS
if ($('#orders-accordion').length > 0) {
// Accordionise the Orders in the Order History
$('#orders-accordion').accordion({
//active: 0,
header: ".order-accordion-header",
collapsible: true,
//autoHeight: true,
heightStyle: "panel"
});
}
function bindClickToOrderBox(showTopBox) {
$('.order-wrapper div').click(function() {
var content = $(this);
$(content).siblings('.order-info').html('<div class="order-loading"></div>').show();
$.ajax({
url: 'default.aspx',
data: 'Z=C&rnd=&serveas=ajax&action=history&oid=' + $(this).data('oid'),
success: function(xhr) {
$(content).siblings('.order-info').html(xhr);
$('[name="tax-invoice-button"]', $(content).siblings('.order-info')).click(function() {
$('#order_invoice_' + $(this).data('orderid')).attr('src', '/default.aspx?Z=C&action=history&oid=' + $(this).data('orderid') + '&mode=print');
});
}
});
});
if (showTopBox) {
var topOrderDiv = $('.order-wrapper div:first');
$.ajax({
url: 'default.aspx',
data: 'Z=C&rnd=&serveas=ajax&action=history&oid=' + topOrderDiv.data('oid'),
success: function(xhr) {
topOrderDiv.siblings('.order-info').html(xhr).show();
$('[name="tax-invoice-button"]', $(topOrderDiv).siblings('.order-info')).click(function() {
$('#order_invoice_' + $(this).data('orderid')).attr('src', '/default.aspx?Z=C&action=history&oid=' + $(this).data('orderid') + '&mode=print');
});
}
});
}
}
尝试在修改手风琴内容的ajax调用之后添加手风琴刷新,如下所示:
$("#orders-accordion").accordion("refresh");
将调整页面上手风琴的大小,使其内容不会溢出到后面出现的任何元素中