Question

发生了什么？：我的jQuery手风琴的动画被打破了。在关闭上一个选项卡之前，它会在短时间内单击下一个选项卡后显示先前打开的选项卡。动画也不会滑动。

找到

/* The following was added into accordion.css */
.ui-accordion .ui-accordion-content { height: auto!important; }

的jQuery

$(document).ready(function() {

    $("#accordion").accordion({ 
        active: false,
        fillSpace: false
    });

    $("#accordion").accordion("option", "active", false);
    $("#accordion").accordion("option", "fillspace", false);
});

我尝试了什么：我已经摆弄了fillSpace和height的值。在accordion.css中，我尝试了overflow: visible!important;，但格式化确实搞砸了。

我想要发生的事情：根据每个部分的高度清理动画，每个部分的高度取决于每个<div>的内容量（AKA对于上面的CSS有什么用）。< / p>

Answer 1

如果我没弄错你正在使用插件？至少对我来说这是一个问题（因为出乎意料的行为而讨厌他们）。不久前我创造了自己的手风琴。您可以查看工作示例HERE. 希望它能帮到你！
这是我的代码：

   $(document).ready(function() {

   $('.wrapper ul li ul:first').addClass('active');
   $('.wrapper ul li ul').hide();
   $('a.home,a.about,a.service,a.contact').click(function()     {
   if($('a.home,a.about,a.service,a.contact').next('ul').hasClass('active')) {
   $('.active').stop(true, true).slideUp('slow');
   $('.active').removeClass('active');
   $(this).next('ul').addClass('active');
   $('.active:not(:animated)').stop().slideDown('slow');
   }
   });
   });

Answer 2

我现在觉得有点傻，但只是将autoHeight设置为false就会删除内容较少的部分下方不必要的空间。动画也很流畅。

$(document).ready(function() {

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

    $("#accordion").accordion("option", "active", false);
    $("#accordion").accordion("option", "autoHeight", false); // ADDED
    $("#accordion").accordion("option", "collapsible", false);
});

手风琴动画在设置高度时自动破坏！重要

2 个答案: