Question

我是Jquery的新手，但写过一部简单的垂直手风琴。这似乎是我需要的工作，但在滑动结束时有一个可见的混蛋。

如果有人能看到它并建议解决方案，它将阻止我拉出更多的头发！

这是我的测试页面的链接（我的所有代码[css，js等]都在一个文件中以方便）：Vertical Accordion

Answer 1

在你的自定义代码中，我通过对CSS进行一些小改动并指定手风琴中p标签的高度来摆脱“跳跃”。

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

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

也许你可以走过去并获得每件作品的计算高度，并将其添加到每个项目样式中，从而消除你最后得到的“混蛋”。

这些方面的东西：

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

修改

我继续下载了你的页面副本并进行了测试，它似乎在一些快速的浏览器测试中运行良好，所以这是你修改过的vaccordian.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 - 通过在手风琴的每个'开口'部分设置一个明确的高度，它会移除生涩的动画。所以我们通过脚本设置这些高度。

Answer 2

如果其他人遇到此问题，请参考以下内容：

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

我没有时间调查此修复工作原因的详细信息，但我还是想分享。

Answer 3

我只能使用overflow: auto或overflow: hidden解决了我的问题。我认为这是有效的，因为它忽略了元素的高度，并将显示它可以做的任何事情。只要不是一个很小的高度它应该能够显示所有内容，但添加overflow属性可以使它更平滑地过渡，因为它不计算高度。

在jQuery slideDown动画结束时修复垂直跳转

3 个答案:

修改