Jquery手风琴集装箱高度问题

我正在使用JQUERY Accordion隐藏/显示一些框。我在其中的一些内容中有很多内容，当我点击显示标题时，所有内容都填充了#mainContent - 我可以看到此内容，因为背景色设置为#mainContentJquery手风琴集装箱高度问题

我假设它是一个函数，我需要添加在内嵌的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>

来源

2011-02-11 tom

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

设置在包装和手风琴的高度和宽度的手风琴，你应该设置我通常有这样的布局。

来源

2011-02-11 19:33:18 scrappedcola

我觉得现在的工作，就必须弄清楚为什么存在一定差距出现在倒塌的div的底部。谢谢！ – tom 2011-02-11 21:16:44

我正在使用curveycorners.js为maincontent四舍五入我的DIV的边缘，但由于某种原因，当我将它设置为#maincontent并且我折叠使用手风琴的div时，所有包含的内容都消失了，我假定它要做与使用溢出：隐藏你会推荐我做什么？ – tom 2011-02-11 22:42:22

您的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/

来源

2011-02-11 19:33:55

Jquery手风琴集装箱高度问题

回答

相关问题