logo标签列表

jQuery UI折叠菜单使用autoHeight=true，在非默认面板上出现不必要的滚动条。

jquery-uiaccordion
22
我在使用jQuery手风琴时遇到了问题。当我创建一个内容窗格，其中非默认窗格具有比默认窗格更多的内容，并且autoHeight为true时，这会在切换窗格时提供漂亮的动画效果，但非默认窗格会出现滚动条，而我不想要滚动条。
您可以通过转到http://jqueryui.com/themeroller/并切换到类似于“Blitzer”或“Humanity”的主题，然后打开示例手风琴的第3节来查看此情况。在Safari 3.2.1和Firefox 3.0.8中发生了这种情况。
如果将autoHeight设置为false，则不会发生这种情况，并且所有内容窗格都具有正确的高度，但是内容窗格仅在动画结束时呈现，看起来很奇怪，因此我必须关闭动画以避免这种奇怪的情况。
要么我理解错了什么，要么这是jQuery UI手风琴中的错误。请帮助我弄清楚它们两个中的哪一个（或者可能是两个都有）。
2
想知道是否有任何答案解决了这个问题... - T J
这个问题已经五年了，而我早已超越了提出这个问题的项目。我真的没有好的方法来审核答案 :( - Jaanus
但是你找到解决方案了吗？还是在项目中没有修复这个问题而继续前进？当我提出一个问题并且自己找到了解决方案，我会发布解决方案以与其他人分享，并揭示已经找到了解决方案。但我知道你在2009年4月7日提出了这个问题，而我看到答案是从2010年、2011年、2012年和2013年的。项目通常不能持续那么长时间。答案来得太晚了。 - Jaime Montoya
我完全不记得这个项目，也不知道我在那里做了什么。可能是在需要解决方案之前就被放弃了。 - Jaanus
11个回答
52

我尝试了几种不同的方法。单独使用autoHeight: false无法生效。以下是最终对我有效的方法：

$( "#accordion" ).accordion({
            heightStyle: "content",
            autoHeight: false,
        clearStyle: true,   
        });

我正在使用这个内容编辑Web部件在SharePoint上，而这个Web部件有一个固定的宽度。当向手风琴小部件添加内容时，这会增加高度问题。

2
这个答案解决了我的问题。其他的答案（使用CSS overflow hack）解决了问题，但是反过来又引起了另一个问题：当前打开的手风琴面板平滑折叠的动画变得僵硬和卡顿。 - EbbnFlow
4
高度风格：内容 - 获胜。 - KSwift87
1
叮叮叮！我猜这是 jQuery UI 上的新功能，因为在 API 中没有提到 autoHeight 或 clearStyle。 - sampoh
2
太好了，这也解决了我的问题！是的，这应该被接受为答案+2。 - morktron
我使用了你的解决方案，它为我解决了问题，但在我的情况下，我不需要使用 clearStyle: true。 - Jaime Montoya
14

使用这个组合选项对我有效，1.当前版本的jquery/ui。

$( '#x' ).accordion({
    autoHeight: false,
    clearStyle: true
});
13

我遇到了类似的问题，对我来说以下CSS更改起作用了。

.ui-accordion .ui-accordion-content{
overflow:visible !important;
}
5
它能运行，但动画似乎有问题。在动画期间，当前内容元素与手风琴边框重叠。 - Maksim Vi.
10

现在（使用jQuery UI- v1.8），只需使用autoHeight即可，不再出现滚动条。

jQuery("#accordion").accordion(
  {
    autoHeight:false
  }
);
1
是的，如果这个内容能得到更多的投票并向上移动页面会很好。 - jasonflaherty
这将处理大多数情况，但是当手风琴中只有一个项目时（至少看起来是这个原因），滚动条仍然会出现。 - zw324
8

使用 heightStyle: "content" 可以解决我的问题。 参考链接：手风琴

6
2
在所有回答中，这个解决方案没有不必要的滚动条和动画也没有破裂。然而，每个<div>的高度是相同的。尽管如此，感谢你分享这个解决方案，noah。+1 - Rob
在所有的答案中，这是唯一一个对我有效的。 - Sanjay Manohar
4
1
overflow:visible !important和overflow:hidden !important似乎都可以解决滚动条问题，但会影响动画效果。 - TruckerG
我只在IE7中遇到了这个问题，overflow:visible !important和overflow:hidden !important对我有用，使动画保持不变。我正在使用jQuery ui的1.8.17版本。 - Joseph Woodward
在SO中，仅提供链接的答案是不被鼓励的。请在答案本身中添加关键概念。 - T J
3
2

这对我有效：

.ui-accordion-content-active, .ui-accordion-header-active{
    display: block;
}
1

我尝试了

.ui-accordion .ui-accordion-content{ overflow:visible !important; }

但是我在第一个选项卡中看到了一些视觉伪影。所以我用以下方法解决了这个问题：

<script type="text/javascript">
    (function() {
        var fixScroll = function(event, ui) {
            $(event.target).find('.ui-accordion-content-active').css('overflow', 'visible');
         }
        $('#tabs').accordion({ 
            header: "h2",
            create: fixScroll,
            change: fixScroll
        });
    })();
</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接