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手風琴集裝箱高度問題

回答

相關問題