Jquery手风琴高度溢出
Jquery accordion height overflow
我有一个jquery (v 1.11.4) ui手风琴,它将在不同的客户订单(不同的长度)打开时ajax。我遇到的问题是,因为创建手风琴时内容不存在,所以高度设置不正确,并且内容与下面的手风琴重叠。
我试过在True/False之间改变autoheight,在content, fill, panel, auto, "content"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");
将调整页面上手风琴的大小,使其内容不会溢出到后面出现的任何元素中
相关文章:
- 图像宽度和高度,无拉伸或溢出
- 可变高度,自动溢出
- 在每个固定高度段落的最后一行添加省略号,并隐藏溢出 y
- CSS主体100%高度,必要时溢出
- 在具有可变高度的元素上隐藏溢出
- 'style=“;边界:无;溢出:隐藏;高度:80px”'到js对象
- CSS webkit溢出隐藏和HTML元素高度
- 检测 Chrome 浏览器窗口的宽度和高度,以防止元素溢出
- 当溢出-x 设置为隐藏时处理可变高度图像的最佳方法是什么?
- 动态设置元素的高度以使其溢出:auto
- 溢出:即使设置高度也自动不起作用
- 如何使Youtube嵌入适合屏幕高度,同时让其宽度溢出
- 在没有jank的固定高度溢出中设置scrollTop动画
- scrollTop Broken:车身高度100%,溢出自动
- ExtJS:100%高度面板导致溢出
- Jquery手风琴高度溢出
- 溢出内容的Div高度
- 通过调整对象大小来避免高度溢出
- 如何使用JQuery修复窗口高度,以调整面板溢出y滚动
- 内容溢出在其他大小-引导全宽度和高度的页面-