点击时手风琴向左弹跳答案

【问题标题】：Accordion bounces to left when clicked点击时手风琴向左弹跳
【发布时间】：2013-08-20 15:58:54
【问题描述】：

加载内容 iframe 时，jQuery 手风琴向左弹跳。我被难住了。

有什么建议吗？

我猜这与 iframe 大小代码有关。

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true, 
        active: false
    });
});

Accordion in jsFiddle

【问题讨论】：

它颠簸是因为手风琴打开时页面溢出创建滚动条。
我就是这么想的。我无能为力吗？就像更改 iframe 大小一样。我想我已经尝试过了。

标签： jquery accordion

【解决方案1】：

不是很酷，但您可以轻松尝试以下解决方法：

$(function(){ $('.ui-accordion-header').on('click',function(){
        if($(this).hasClass('ui-state-active')){
         $('body').css('overflow','hidden');
        }else{
        setTimeout(function(){
         $('body').css('overflow','auto');
         },600);
        }
        });
        });

working example here

【讨论】：

@sbaaaang：使用jsFiddle 点击TidyUp 按钮，它会为您格式化代码，使其可读。然后从那里复制到答案。目前很难观察代码并了解开始和结束的位置。
@FrançoisWahl 是的，你知道我只是另一个懒惰的人：P，我试着整理，但结果是一样的，你可以自己检查：/
不工作我需要整个页面的外部滚动才能在打开时滚动并查看底部标签
@user2630503 所以你肯定无法得到你想要的东西，imo，因为如果你想滚动，你会跳起来

【解决方案2】：

反弹是出现滚动条时的正常浏览器行为。在IE 7（我认为）等较旧的浏览器中，滚动条总是可见的，只是在不需要时禁用。所以不会发生反弹。

调整溢出

您仍然可以实现这一点，并使用overflow 属性使滚动条始终可见，即使在不需要时也是如此。

就像旧版浏览器一样，它会在不需要时禁用滚动条，并在需要时启用它。因此，没有反弹。

下面的 CSS 可以做到这一点：

body {
    overflow-y: scroll;
}

DEMO 1 - 始终显示滚动条

调整高度

另一种选择是使文档略高于 100%，因此您也始终可以看到滚动条，但它始终处于启用状态。

您可以为此添加以下 CSS：

html {
    height: 101%;
}

DEMO 2 - 使用更大的 HTML 文档

DEMO 1 似乎是更标准的方法，因为它看起来更像过去的浏览器，并且在禁用时灰显的滚动条并不那么明显。

DEMO 2 可能不太受欢迎，因为与上述选项不同，从不禁用的滚动条似乎总是指示可滚动的内容，即使内容不是。

使用 JavaScript 解决方案可能不正常，但也更繁重，维护/更新可能更乏味。

【讨论】：