13

我是 Jquery 的新手，但写了一个简单的垂直手风琴。这似乎是我需要的工作，但在滑下的最后，有一个明显的混蛋。

如果有人可以查看它并提出解决方案，它将阻止我再拉出我的头发！

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

4

3 回答 3

16

在您的自定义代码中，我通过对 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 - 通过在手风琴的每个“开口”部分设置一个明确的高度，它消除了生涩的动画。所以我们通过脚本设置这些高度。

于 2010-12-07T10:43:45.487 回答
5

作为参考以防其他人遇到此问题，以下内容对我有用：

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

我真的没有时间调查为什么这个修复工作的细节，但我想无论如何我都会分享。

于 2015-07-02T16:25:12.090 回答
0

我能够通过使用overflow: auto或来解决我的问题overflow: hidden。我认为这是可行的，因为它忽略了元素的高度，并且会显示它可以显示的任何内容。只要没有小的高度，它应该能够显示所有内容，但是添加overflow属性可以使其过渡更平滑，因为它不计算高度。

于 2015-12-22T01:52:06.897 回答