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/

Jquery Accordion容器高度问题

2 个答案: