关闭 jQuery Accordion 自动调整大小

Question

我正在使用 jQuery UI 手风琴控件向我的用户呈现一些信息。手风琴窗格中的一些数据本质上更像是“段落”，而一些窗格仅包含项目列表。当“段落”类型的信息显示在窗格中时，控件会填充容器 div 的大小。但是，当用户切换到具有列表类型数据的窗格时，手风琴控件会缩小以适应较小的内容。我不希望它那样做。我希望它始终填充 100% 的容器 div。我试过关闭动画，将宽度设置为 100%，关闭，设置 fillSpace: true，都不起作用。这是我的html/css

HTML

<section id="view-right">
    <div id="letters-accordion">
        <h3>Summary</h3>
        <div class="accordion-content-custom">
            <asp:Literal id="litSummary" runat="server" />
        </div>
        <h3>Categories</h3>
        <div class="accordion-content-custom">
            <asp:Repeater id="rptCategories" runat="server">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <li><asp:Literal runat="server" Text='<%# Eval("Name") %>' /></li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </div>
        <h3>Collection</h3>
        <div class="accordion-content-custom">
            <asp:Panel id="pnlInstitution" runat="server">
                <span class="label">Institution:</span>
                <asp:Label id="lblInstitution" runat="server" CssClass="data" />
            </asp:Panel>
            <asp:Panel id="pnlCollection" runat="server" CssClass="accordion-field-set">
                <span class="label">Collection:</span>
                <asp:Label id="lblCollection" runat="server" CssClass="data" />
            </asp:Panel>
        </div>
        <h3>How to Cite</h3>
        <div class="accordion-content-custom">
            <asp:Placeholder id="plcCiteAuthor" runat="server">
                <asp:Literal id="litCiteAuthorName" runat="server" />
            </asp:Placeholder>. 
            "<asp:Literal id="litCiteTitle" runat="server" />". <em>Letters of 1916</em>. Schreibman, Susan, Ed. Maynooth University: 2016. Website.
            <asp:HyperLink id="lnkCiteURL" runat="server" />.
        </div>
        <h3>Share on Social Media</h3>
        <div class="accordion-content-custom">
            <div class="fb-share-button" data-href='<%= this.LetterURL %>' data-layout="button"></div>
            <a href="https://twitter.com/share" class="twitter-share-button"{count} data-text="Check out this letter from the Letters of 1916 project" data-via="letters1916" data-hashtags="Letters1916">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </div>
    </div>
</section>

CSS

.accordion-content-custom {
  color: black !important; }
  .accordion-content-custom .label {
    font-weight: bold;
    width: 100%;
    display: block;
    color: black;
    text-align: left;
    padding: 3px; }
  .accordion-content-custom .data {
    width: 100%;
    display: block;
    padding: 3px; }

#letters-accordion {
  width: 98%;
  min-width: 98%;
  margin-left: 15px; }

#view-right {
  float: right;
  max-width: 39%;
  margin-right: 10px; }
  #view-right h2 {
    margin: 0px auto;
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #998b77; }

Answer 1

宽度发生变化的原因是<section> 上的max-width 属性与float 结合使用。设置浮动时，容器会自动缩小以适应内容。在这种情况下，列表占用的空间比其他内容要少，并且当该折叠式容器是选定打开的容器时，该部分会自动缩小。
我认为你有两种选择来处理这个问题。

方法一
明确设置section 的宽度。 IE。将max-width 更改为width。

方法二
如果您想保持section 尽可能窄，但仍以相同宽度显示所有内容，请在加载 jQuery 时读取所有容器的宽度，并将所有容器的宽度设置为最大的。类似的东西

var largest = 0;
$("#letters-accordion").children($("div")).each(function () {
    if ($(this).width() > largest)
    {
        largest = $(this).width();
    }
});
$("#letters-accordion").children($("div")).each(function() {
    $(this).width(largest);
});

为了简单起见，我推荐 Mehtod 1。