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内容编辑器webpart中使用它，这在向accordion小部件添加内容时增加了高度问题。

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"帮助解决我的问题。参考：Accordion

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%;
}

我也没有打开自动高度。

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

11 个答案: