Question

这应该是适合您的任何一个。我有一把手风琴，我想要一个固定的高度。每个窗格应该是相同的大小，如果窗格上有任何溢出，则应显示滚动条。在下面的代码中，第一个窗格的加载显示滚动条，但在第一个窗格更改后，手风琴会扩展它的高度，因此不再需要滚动条。

我做错了什么？

   <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>

Answer 1

我看来，随着手风琴的打开和关闭，height属性正在被动画化。因此，一旦顶部面板关闭了一次，它的高度已经从内联样式中指定的高度变为“丢失”。

我发现当我把风格分解到标题时，手风琴按照需要工作：

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

jQuery UI Accordion Disobeys Height

1 个答案: