2010-10-11 124 views
0

這對你來說應該是一件容易的事。我有一把手風琴,我想成爲一個固定的高度。每個窗格應該具有相同的大小,如果在窗格上出現滾動條應該出現的溢出。在下面的代碼中,滾動條顯示在第一個窗格的加載中,但在第一個窗格更改之後,手風琴將擴展其高度,因此不再需要滾動條。jQuery UI Accordion Disobeys Height

我在做什麼錯?

<head> 

     <script type="text/javascript"> 
    jQuery(document).ready(function(){  
     $('#accordion').accordion({autoHeight: false, clearStyle: true}); 
    }); 
     </script> 

    </head> 

    <body> 
     <div id="accordion"> 
    <h3><a href="#">First Section</a></h3> 
    <div style="height:50px; overflow:auto"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis vehicula dui, quis volutpat odio bibendum a. Proin posuere convallis lorem id mattis. Vestibulum lacinia lacinia enim ut euismod. Aenean sit amet tincidunt nunc. Vestibulum gravida, ipsum in tempor dictum, diam nulla auctor purus, a vehicula ante odio quis massa. Pellentesque imperdiet urna ut elit adipiscing ac gravida lectus facilisis. Curabitur laoreet, justo vel dapibus auctor, enim sem dapibus nulla, sed lacinia felis felis sit amet dolor. Nulla lacus dolor, tincidunt convallis sodales vitae, interdum a sapien. Cras ut iaculis orci. Mauris vel nisl vel leo venenatis hendrerit. Duis aliquet lobortis purus, non malesuada lorem sagittis quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sit amet posuere eros. Nam vel turpis at sem adipiscing scelerisque a ac dolor. Morbi lobortis tristique felis, at aliquam libero suscipit sed. Aliquam erat volutpat. Donec porta lorem sed nisl fermentum pulvinar vehicula risus tempus. Integer ultricies dignissim vehicula. Morbi non dolor a arcu rutrum congue. Fusce non urna vitae eros blandit vehicula quis vel ligula. 
    </div> 

    <h3><a href="#">Second Section</a></h3> 
    <div style="height:50px; overflow:auto"> 
     Etiam varius, orci sit amet pharetra laoreet, diam augue dictum justo, et aliquam enim leo ut nulla. Quisque mi nunc, sagittis at euismod vel, feugiat a erat. In a metus quam. Pellentesque ullamcorper volutpat congue. Nunc facilisis varius velit eu lacinia. Quisque est nulla, tempus commodo gravida quis, consequat ut felis. Donec mattis, neque sagittis feugiat sollicitudin, augue lectus vulputate ligula, eget interdum nulla massa at nunc. Proin rhoncus nunc non felis mattis accumsan. Aliquam metus ligula, adipiscing ac ullamcorper vel, lobortis non erat. Aenean placerat libero porta enim dictum malesuada molestie sapien ultricies. Nullam ac commodo ligula. 
    </div> 

    <h3><a href="#">Third Section</a></h3> 
    <div style="height:50px; overflow:auto"> 
Morbi nec risus velit, eget ornare nibh. Duis semper elementum erat, ac egestas purus congue et. Sed commodo lacinia lorem, ac semper risus dapibus mattis. Aliquam quam quam, ultrices quis luctus sit amet, cursus vitae dolor. Nam id lectus justo. Pellentesque in leo sit amet metus eleifend lobortis eget nec turpis. Praesent vitae magna eget mauris cursus tempus vel at mi. Nulla vitae leo accumsan magna mollis luctus. Curabitur viverra nisi ac nisl pulvinar gravida. Curabitur consectetur, diam non placerat sagittis, velit nunc porttitor quam, vel interdum lorem est ut arcu. Suspendisse potenti. Pellentesque vitae leo nunc. 

    </div> 
    </div> 

    </body> 
</html> 

回答

1

我看來,作爲手風琴打開和關閉height屬性被動畫。因此,一旦頂部面板關閉一次,它的高度就會從內嵌樣式中指定的高度發生變化,並且會「丟失」。

我發現,當我的因素風格伸到手風琴作品爲所需頭:

<head> 
    <style type="text/css"> 
     #accordion>div{ 
      height:50px; 
      overflow:auto; 
     } 
    </style> 
    </head> 
+0

我http://stackoverflow.com/questions/8028470/how-to添加這種風格到我的樣本 - 在jquery-ui-accordion-panel中顯示多於一個項目但它不會增加手風琴的面板高度,但仍然太小 – Andrus 2011-11-06 16:36:41