jquery Accordion 容器高度问题

Question

我正在使用 JQUERY Accordion 来隐藏/显示一些框。我在其中一些内容中有很多内容，当我单击以显示标题时，所有内容都填满了#mainContent - 我可以看到这一点，因为背景颜色设置为#mainContent

我假设这是我需要在内联 javascript 中添加的函数？

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            collapsible: true,
            hideOnStartup: true,
            active: false,
            autoHeight: true
        });
    });
    $(function() {
        $("#accordion_two").accordion({
            collapsible: true,
            hideOnStartup: true,
            active: false,
            autoHeight: true
        });
    });
    </script>

<div id="mainContent">

<div id="accordion">
<h4>Header</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam elementum placerat. Donec scelerisque pulvinar justo, nec bibendum neque suscipit et. Phasellus consequat consequat justo, eu lacinia nibh imperdiet id. Phasellus sit amet erat quis dui hendrerit egestas. Sed dolor libero, lobortis eu varius sit amet, pretium eget nisl. Suspendisse venenatis suscipit orci blandit dignissim. Suspendisse ac tortor eleifend felis cursus tempus. Aenean sodales, quam sed aliquam placerat, ligula augue varius enim, quis ultrices mauris tellus at elit. Aliquam erat volutpat. Donec eleifend ipsum eros. Ut laoreet, ligula ut eleifend imperdiet, dolor arcu tempus velit, quis convallis urna mi ut justo. Sed egestas, lectus eget ornare congue, mauris enim condimentum erat, ut condimentum ipsum neque non purus. Etiam orci nulla, imperdiet vel tempus in, placerat id dolor. Integer convallis consequat odio. Sed ornare urna turpis, ut malesuada purus.
</div>


<div id="accordion_two">
<h4>Header Two</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam elementum placerat. Donec scelerisque pulvinar justo, nec bibendum neque suscipit et. Phasellus consequat consequat justo, eu lacinia nibh imperdiet id. Phasellus sit amet erat quis dui hendrerit egestas. Sed dolor libero, lobortis eu varius sit amet, pretium eget nisl. Suspendisse venenatis suscipit orci blandit dignissim. Suspendisse ac tortor eleifend felis cursus tempus. Aenean sodales, quam sed aliquam placerat, ligula augue varius enim, quis ultrices mauris tellus at elit. Aliquam erat volutpat. Donec eleifend ipsum eros. Ut laoreet, ligula ut eleifend imperdiet, dolor arcu tempus velit, quis convallis urna mi ut justo. Sed egestas, lectus eget ornare congue, mauris enim condimentum erat, ut condimentum ipsum neque non purus. Etiam orci nulla, imperdiet vel tempus in, placerat id dolor. Integer convallis consequat odio. Sed ornare urna turpis, ut malesuada purus.
</div>

</div>

Answer 1

您的 CSS 是什么样的？确保包含的 div(即您的主要内容)溢出:隐藏。当我使用 ui 的 Accordion 时，我通常会有这种布局

<div id=wrapper>
    <div class='accordion'>
      <div class='header'><a href='javascript:void(0)'>Header 1</div>
      <div class='content'>Accordion content here</div>
      <div class='header'><a href='javascript:void(0)'>Header 2</div>
      <div class='content'>Accordion content here</div> 
    </div>
   </div>

   //css
   #wrapper{overflow:hidden;}

在 wrapper 和 accordion 上设置高度和宽度，你应该设置好了。