jQuery UI 手风琴不服从高度

发布于 2024-09-26 20:48:37 字数 3417 浏览 2 评论 0原文

这对你来说应该是一件容易的事。我有一个手风琴，我希望它具有固定的高度。每个窗格应具有相同的大小，如果窗格上有任何溢出，则应出现滚动条。在下面的代码中，滚动条出现在第一个窗格的加载时，但在第一个窗格更改后，手风琴会扩展其高度，因此不再需要滚动条。

我做错了什么？

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

原文

This should be any easy one for you. I have an accordion that I'd like to be a fixed height. Each pane should be the same size, if there is any overflow on a pane a scroll bar should appear. In the code below the scroll bars appear on load for the first pane, but after the first pane change, the accordion expands it's height, so scroll bars are no longer needed.

What am I doing wrong?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

汹涌人海 2024-10-03 20:48:37

我发现当手风琴打开和关闭时， height 属性正在动画化。因此，一旦顶部面板关闭一次，它的高度就会从内联样式中指定的高度发生变化，并且“丢失”。

我发现当我将样式分解到标题中时，手风琴可以按需要工作：

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

I appears that the height property is being animated as the accordion opens and closes. So once the top panel has been closed one time, it's height has been changed from the one specified in the inline style and is 'lost'.

I found when I factor the style out into the header the accordion works as desired:

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

回复收藏 0 原文

~没有更多了~

关于作者

拥抱我好吗

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

jQuery UI 手风琴不服从高度

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

jQuery UI 手风琴不服从高度

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。