Jquery手风琴高度溢出

Posted 2021-03-28

我有一个jquery（v 1.11.4）ui手风琴，它会在打开时以不同的客户订单（不同长度）进行调整。我遇到的问题是因为创建手风琴时内容不存在，高度没有正确设置，内容与下面的手风琴重叠。

我尝试在True / False之间更改autoheight，在内容，填充，面板，自动，“内容”和“面板”之间更改heightStyle，并同时使用它们以防万一。

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");

这应该调整页面上的手风琴大小，使其内容不会溢出到它后面出现的任何元素。