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

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

方法1
明确设置section的宽度。 IE浏览器。将max-width更改为width。

方法2
如果要保持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.

关闭jQuery手风琴自动调整大小

1 个答案: