javascript - Horizo​​ntal Accordion - jQuery 插件 - Firefox 上的滚动动画错误 - 如何调试

Question

有一个 jQuery 插件允许您构建水平 Accordion ，它在除 firefox 之外的所有浏览器中都很好用。我的主要问题是我对调试客户端代码有点不熟悉，我主要是 Java 程序员，虽然我对客户端技术有很好的理解，但实际上尝试调试这个问题让我迷路了，有人可以看看bug，如果可能的话确定根本原因，并分享他们是如何解决这个问题的？

I've already set up a reproduction of the code, the gray bars are "handles" click them to expand their content, light gray means already expanded, dark gray means minimized

当我提到 Accordion 时，我指的是完整组件，在本例中，是两个 handle ，以及显示的内容

这里有一些我已经知道的可以帮助你入门的东西:

• 在动画期间 Accordion 的大小增加 1 或 2 个像素
• 当包含的 div 的大小设置为 Accordion 的大小时，错误很明显
• 如果包含的 div 的大小增加，大小仍然会增加，从而产生最右边缘的“颤动效果”
• 问题只出现在 firefox 上

Answer 1

尝试稍微调整一下 CSS ( updated demo ):

#containingDiv {
    height : 200px;
    width : 460px;
    overflow: hidden;
}

#myAccordion {
    width: 2000px; /* should be wide enough to contain all panels - max width in opera is 32766 */
}

---

更新:引用standard CSS for the hrzAccordion之后, 我发现向句柄添加负右边距可以解决所有闪烁问题 ( updated demo ):

.handle {
    height : 200px;
    width : 30px;
    background : #aaaaaa;
    margin : 0 -1px 0 0;
    padding : 0px;
}