Javascript 修复jQuery slideDown动画末尾的垂直跳转

我不熟悉Jquery，但写了一个简单的竖琴。这似乎是我所需要的工作，但在下滑的最后有一个明显的冲动

如果有人能看看它并提出解决方案，我就不会再拔头发了

---

这里有一个指向我的测试页面的链接（为了方便起见，我所有的代码[css、js等]都在一个文件中）：

在您的自定义代码中，我通过在css中做一个小更改并指定accordion中p标记的高度来消除“跳跃”

由于您通过脚本将它们全部隐藏，因此在执行此操作之前：

$(".accordion p:not(:first)").hide(); 

也许你可以走一遍，计算出每件作品的高度，并将其添加到每件作品的风格中，从而消除你在结尾时的“冲动”

大致如下：

$('.accordion p').each(function(index) {
   $(this).css('height', $(this).height());
});

编辑 我下载了一份你的页面，并对其进行了测试，在一些快速的浏览器测试中，它似乎运行良好，下面是你修改后的vacordian.js：

$(document).ready(function(){   
    $('.accordion p').each(function(index) {
       $(this).css('height', $(this).height());
    });


    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();


    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

---

TL；DR-通过在手风琴的每个“开口”部分上设置一个明确的高度，它将删除抖动动画。因此，我们通过脚本来设置这些高度。

为了便于其他人遇到此问题时参考，以下内容对我很有用：

.ui-accordion .ui-accordion-content {
    overflow: auto;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

---

我真的没有时间调查这个修复程序工作的细节，但我想我还是会与大家分享。

我可以通过使用

溢出：自动
或
溢出：隐藏
来修复我的问题。我认为这是可行的，因为它忽略了元素的高度，并将尽可能地显示它。只要高度不是很小，它就应该能够显示所有内容，但添加
overflow
属性可以让它更平滑地过渡，因为它不计算高度。
我也遇到过同样的问题，但忽略了它，最终由于另一个原因放弃了手风琴；有一个错误与自动高度，不断使它挂在底部的网页，是3倍长的div它所包含的-每次刷新页面我得到一个不同大小的手风琴。。。我个人认为这个特定的jQuery控件需要做更多的工作。。。您是否使用不同的浏览器进行测试？此外，在我的FF4Beta7上，它在末尾有点跳跃，除了Q7、8、9，它们工作正常。看起来这是对物体高度的错误计算。解决了，谢谢你的帮助埃里克（你在我的书中是个明星）是的，这对我也有用。结合手风琴html容器的固定高度，可以在不发生突然变化的情况下获得适当的滑动动画。因此，我现在可以根据需要在accordion元素上设置边距/填充，而不会遇到问题：）请参阅我的。