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 中的手风琴时，我通常有这种布局

<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;}

设置包装器和手风琴的高度和宽度，您应该设置好。

Answer 2

您的 HTML 有点错误。要折叠的部分需要在这样的内部 div 中：

<div id="mainContent">

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

  <div id="accordion_two">
    <h4>Header Two</h4>
    <div>
      Lorem ...
    </div>
  </div>

</div>

此外，您不需要两个手风琴。你可以这样做：

<div id="mainContent">

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

    <h4>Header Two</h4>
    <div>
      Lorem ...
    </div>

  </div>
</div>

示例：http://jsfiddle.net/ChrisMH/S4Qfx/