2010-10-11 49 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