具有 autoHeight=true 的 jQuery UI 手风琴在非默认窗格上有不必要的滚动条

Question

我在使用 jQuery 手风琴时遇到问题。 当我创建一个内容窗格时，非默认窗格的内容比默认窗格多，并且 autoHeight 为 true，这在切换窗格时提供了很好的动画，但非默认窗格获得了我不想要的滚动条。

您可以通过转到 http://jqueryui.com/themeroller/ 切换到主题来查看此操作例如“Blitzer”或“Humanity”，然后打开示例手风琴的第 3 部分。 我使用的是 Safari 3.2.1 和 Firefox 3.0.8。

如果切换到 autoHeight=false，则不会发生这种情况，并且所有内容窗格都具有正确的高度，但内容窗格仅在动画结束时渲染并且看起来很奇怪，因此我必须关闭动画以避免这种奇怪的情况。

要么是我误读了某些内容，要么这是 jQuery UI 手风琴中的一个错误。 请帮我找出是两者中的哪一个（或者两者都是）。

Answer 1

我尝试了几种不同的方法。 autoHeight: false 本身不起作用。 这最终对我有用：

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

我在具有固定宽度的 SharePoint 内容编辑器 Web 部件中使用它，这在向手风琴小部件添加内容时增加了高度问题。

Answer 2

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

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

Answer 3

我遇到了类似的问题，对我来说，CSS 的以下更改有效。

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

Answer 4

如今（使用 jQuery UI - v1.8），只需 autoHeight 就足够了，不再出现滚动条。

jQuery("#accordion").accordion(
  {
    autoHeight:false
  }
);

Answer 5

使用 heightStyle: "content" 帮助解决了我的问题。
参考：手风琴

Answer 6

我知道这已经很旧了，但我遇到了这个问题并降落在这里。 可以在这里找到不会破坏动画并摆脱动画的解决方案：

http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/

对于那些不想点击的懒惰的人来说，简短的回答是：

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

在手风琴的 CSS 中

Answer 7

试试这个

http://helpdesk。 objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion

Answer 8

我从 http:// helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion 上面提到的链接。 这是该文章下的评论之一。 它去掉了滚动条，但也保留了其余的 div 格式。 上面的答案可能会导致内容跨越边界流动，就像我所发生的那样。

.ui-accordion .ui-accordion-content{
height:auto!important;
}

Answer 9

这对我有用：

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

Answer 10

我尝试过

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

Answer 11

检查 ui-accordion-content 的填充是否被覆盖。

当我将以下内容放入 css 中时，我遇到了同样的问题：

.container .ui-widget-content {
    padding-right: 3%;
}

我将其更改为如下所示，并且滚动条消失了！

.container .ui-widget-content:not(.ui-accordion-content) {
    padding-right: 3%;
}

我也没有打开自动高度。